Rivalry2

HTML Diff

1 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <h2>What is HTML?</h2>

2 HTML (Hypertext Markup Language)is a language for marking up hypertext, it's 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.

3 Take a good look at the page you're on now. All of it, regardless of appearance, is written using HTML. It does a good job of showing that no matter how complicated the page is, the whole essence of it has remained the same for more than 20 years.

4 The word "language" in HTML should be taken to meanrule. HTML by itself onlymarks upthe data; it doesn't interact with it in any way and does nothing with it visually. All the work of displaying text data and markup is done by the browser.

5 You can try to open the markup of this page using Ctrl + U (Cmd + Option + U on macOS).

6 Don't be intimidated by all the stuff you can see there. In time, this will stop looking like gibberish, and you'll easily navigate HTML markup.

7 Let's take a look at a small example of HTML:

8 Right now, it may seem unclear what section, h1, and p mean. But now the most important thing is that behind all these constructions is the text content.

9 Always put content before visual appearance. The courses will give you many different block styling techniques, but don't get carried away. If the text on the page is hard to read, the page will have almost no value.

10 + <h2>Tags in HTML</h2>

10 But what did the mysterious section, h1, and p mean? In markup language, they're called tags. It's the tags that wrap our content and ultimately get processed by browsers.

11 But what did the mysterious section, h1, and p mean? In markup language, they're called tags. It's the tags that wrap our content and ultimately get processed by browsers.

11 One of the tags it's important to learn about is a paragraph. Paragraph, like paragraphs in real life, allows you to separate sections of text by meaning. Visually, this is usually done using indentation. There are many paragraphs on this page, and you can easily distinguish them from each other by the spacing between them.

12 One of the tags it's important to learn about is a paragraph. Paragraph, like paragraphs in real life, allows you to separate sections of text by meaning. Visually, this is usually done using indentation. There are many paragraphs on this page, and you can easily distinguish them from each other by the spacing between them.

12 In order to insert a paragraph into a page, you need to specify a special construction, and , with a paragraph of text between them.

13 In order to insert a paragraph into a page, you need to specify a special construction, and , with a paragraph of text between them.

13 As you'll have noticed, we may have more than one paragraph. Almost allHTML tagscan be used multiple times on one page.

14 As you'll have noticed, we may have more than one paragraph. Almost allHTML tagscan be used multiple times on one page.

14 The paragraph tag has an opening and a closing . It is because of this that the browser understands where the paragraph begins and where it ends. These tags are calledpairedtags.

15 The paragraph tag has an opening and a closing . It is because of this that the browser understands where the paragraph begins and where it ends. These tags are calledpairedtags.

15 You may imagine that if there are paired tags, then there'll also beunpairedtags. And you're not wrong! In the process of working with layout design, you'll learn about these tags and how they're used Take your time :)

16 You may imagine that if there are paired tags, then there'll also beunpairedtags. And you're not wrong! In the process of working with layout design, you'll learn about these tags and how they're used Take your time :)

16 Another key concept that goes alongside tags isnesting. Look again at the example markup:

17 Another key concept that goes alongside tags isnesting. Look again at the example markup:

17 In this example, we have apaired section tag, and inside it there are other tags and text inside them. This concept is an important one that allows you to build large systems.

18 In this example, we have apaired section tag, and inside it there are other tags and text inside them. This concept is an important one that allows you to build large systems.

18 Sometimes, nesting is a necessary part of text markup. For example, lists cannot be made without using nesting.

19 Sometimes, nesting is a necessary part of text markup. For example, lists cannot be made without using nesting.

19 The browser will output this HTML markup as follows:

20 The browser will output this HTML markup as follows:

20 <ul><li>The first list item</li>

21 <ul><li>The first list item</li>

21 <li>The second list item</li>

22 <li>The second list item</li>

22 </ul>Withoutlitags, the browser cannot distinguish between plain text and list items.

23 </ul>Withoutlitags, the browser cannot distinguish between plain text and list items.

23 <h2>Attributes</h2>

24 <h2>Attributes</h2>

24 Another important concept in HTML is attributes and what they mean. Attributes are just additional information for the browser.

25 Another important concept in HTML is attributes and what they mean. Attributes are just additional information for the browser.

25 In HTML, you can use links to navigate the web. It's not enough to just provide a link tag (<a></a>) and the text inside.

26 In HTML, you can use links to navigate the web. It's not enough to just provide a link tag (<a></a>) and the text inside.

26 Browsers, unfortunately, can't read our thoughts and redirect the user where we want :(

27 Browsers, unfortunately, can't read our thoughts and redirect the user where we want :(

27 To redirect the user, we have to help the browser and tell it where the user will go after clicking on the link. This requires thehrefattribute, the value of which is the desired link.

28 To redirect the user, we have to help the browser and tell it where the user will go after clicking on the link. This requires thehrefattribute, the value of which is the desired link.

28 Now, when the user clicks on the link, they'll be successfully redirected to the address we specified inside the href attribute.

29 Now, when the user clicks on the link, they'll be successfully redirected to the address we specified inside the href attribute.

29 <h2>General HTML tag format</h2>

30 <h2>General HTML tag format</h2>

30 <h2>Do it yourself</h2>

31 <h2>Do it yourself</h2>

31 Use any online service that can convert HTML markup. For example,<a>https://htmlcodeeditor.com/</a>.

32 Use any online service that can convert HTML markup. For example,<a>https://htmlcodeeditor.com/</a>.

32 Insert the following markup in the left part:

33 Insert the following markup in the left part:

33 Look at the final result. Try deleting different tags and changing them. Experiment, it won't bite :)

34 Look at the final result. Try deleting different tags and changing them. Experiment, it won't bite :)