Ключевые теги HTML

Last updated: 9 мая 2025 г.

В этом уроке приведем несколько наиболее распространенных тегов, которые встречаются почти везде.

Для начала рассмотрим теги title и h.

Также сверху html страницы зачастую можно увидеть тег DOCTYPE. Этот тег сообщает любому браузеру в котором html страница была открыта, как отображать html код. Если он не будет указан, то каждый браузер будет отображать страницу как ему вздумается, что может привести к тому, что страница будет отображена не корректно.

1<!DOCTYPE HTML>
2<html>
3<head>
4    <!-- Как уже говорилось в прошлом уроке title отображает 
5    текст на вкладке страницы в браузере. -->
6    <title>Page tab text</title>
7</head>
8<body>
9    <!-- Есть теги h - заголовки разных уровней. -->
10    <!-- Уровни это размер заголовка.
11         h1 - тег самого большого заголовка
12         h6 - самого маленького -->
13    <h1>Большой заголовок</h1>
14    <h2>Заголовок поменьше</h2>
15    <h3>Ваше маленький заголовок жесть</h3>
16    <p>Какой-то текст в теге p.</p>
17</body>
18</html>

Давайте откроем только что написанную страницу в браузере.

Видим на странице в браузере содержимое разных тегов заголовка.

Также на вкладке можно увидеть текст Page tab text. Этот текст мы писали в теге <title>.

Добавим на страницу таблицу.

1<!DOCTYPE HTML>
2<html>
3    <head>
4        <title>Page tab text</title>
5    </head>
6    <body>
7        <h1>Большой заголовок</h1>
8        <h2>заголовок поменьше</h2>
9        <h3>Еще меньше</h3>
10        <p>Какой-то текст в теге p.</p>
11
12        <!-- Таблица добавляется на страницу 
13             с помощью тега table. В аттрибуте border 
14             можно задать толщину рамки таблицы.
15             Об аттрибуте чуть попозже.-->
16        <table border="1px">
17            <!-- tr это строка таблицы -->
18            <tr>
19                <!-- td это ячейка строки tr.
20                     Как видим три td ниже находятся
21                     внутри тега tr. То есть это три
22                     ячейки тега tr. -->
23                <td>
24                    <!-- В ячейку можно добавить текст
25                         или что либо еще. Добавим текст-->
26                    <p>Какой-то текст в строке 1</p>
27                </td>
28                <td>
29                    <p>Какой-то текст в строке 1</p>
30                </td>
31                <td>
32                    <p>Какой-то текст в строке 1</p>
33                </td>
34            </tr>
35            <!-- Добавим еще одну строку
36                 с тремя ячейками -->
37            <tr>
38                <td>
39                    <p>Какой-то текст в строке 2</p>
40                </td>
41                <td>
42                    <p>Какой-то текст в строке 2</p>
43                </td>
44                <td>
45                    <p>Какой-то текст в строке 2</p>
46                </td>
47            </tr>
48            <!-- еще одну строку -->
49            <tr>
50                <td>
51                    <p>Какой-то текст в строке 3</p>
52                </td>
53                <td>
54                    <p>Какой-то текст в строке 3</p>
55                </td>
56                <td>
57                    <p>Какой-то текст в строке 3</p>
58                </td>
59            </tr>
60        </table>
61    </body>
62</html>

Давайте откроем только что написанную страницу в браузере.

Видим на странице в браузере таблицу.

В ней три строки:

строка, которая содержит три ячейки с текстом “Какой-то текст в строке 1”,
строка, которая содержит три ячейки с текстом “Какой-то текст в строке 2”
и строка, которая содержит три ячейки с текстом “Какой-то текст в строке 3”.

То есть всё соответствует тегам, которое мы писали в файле.

Также можно увидеть рамку в один пиксель. Это мы настраивали, как мы помним, аттрибутом border.

Тегом img можем разместить картинку на странице.

В аттрибуте src указывается путь к картинке на нашем компьютере, которую мы хотим разместить на странице.

Подробнее о том, что такое аттрибуты разберем в следующем уроке.

1<!DOCTYPE HTML>
2<html>
3    <head>
4        <title>Page tab text</title>
5    </head>
6    <body>
7        <h1>Большой заголовок</h1>
8        <h2>заголовок поменьше</h2>
9        <h3>Еще меньше</h3>
10        <p>Какой-то текст в теге р.</p>
11    
12        <!--Допустим файл картинки PatrickLearnsHtml.png хранится в папке C:\HTML\.
13        Тогда в src пишем так: -->
14        <img decoding="async" src="C:\HTML\PatrickLearnsHtml.png">
15    
16        <table border="1px">
17            <tr>
18                <td>
19                    <p>Какой-то текст в строке 1</p>
20                </td>
21                <td>
22                    <p>Какой-то текст в строке 1</p>
23                </td>
24                <td>
25                    <p>Какой-то текст в строке 1</p>
26                </td>
27            </tr>
28            <tr>
29                <td>
30                    <p>Какой-то текст в строке 2</p>
31                </td>
32                <td>
33                    <p>Какой-то текст в строке 2</p>
34                </td>
35                <td>
36                    <p>Какой-то текст в строке 2</p>
37                </td>
38            </tr>
39            <tr>
40                <td>
41                    <p>Какой-то текст в строке 3</p>
42                </td>
43                <td>
44                    <p>Какой-то текст в строке 3</p>
45                </td>
46                <td>
47                    <p>Какой-то текст в строке 3</p>
48                </td>
49            </tr>
50        </table>
51    </body>
52</html>

Как видим, картинка PatrickLearnsHtml.png действительно храниться в папке C:\\HTML.

Давайте откроем только что написанную страницу в браузере.

Как видим, картинка PatrickLearnsHtml.png из папки HTML успешно была добавлена на страницу.

Тегом br можно перейти на новую строку на странице (типа \n в консоли в Java).

Также важным тегом является тег ссылки – тег <a>.

Этот тег отображает на странице текст по нажатию на который происходит переход по ссылке.

Переход может совершаться совершенно любую ссылку, например на ютуб. Указывается ссылка в href аттрибуте этого тега .

1<!DOCTYPE HTML>
2<html>
3<head>
4    <title>Page tab text</title>
5</head>
6<body>
7    <h1>Большой заголовок</h1>
8    <h2>заголовок поменьше</h2>
9    <h3>Еще меньше</h3>
10    <p>Какой-то текст в теге p.</p>
11    <img decoding="async" src="C:\HTML\PatrickLearnsHtml.png">
12    <!-- Можно с помощью br пропустить 
13    несколько строк после картинки, а потом 
14    отображать другие элементы страницы. 
15    Пропустим 5 строк страницы.-->
16    <br/>
17    <br/>
18    <br/>
19    <br/>
20    <br/>
21    <!-- Разместим на странице ссылку 
22    на ютуб с помощью тега <a>.-->
23    <a href="https://www.youtube.com/">Кликни на меня и перейди на ютуб</a>
24    <!-- Опять таки сделаем отступ 
25    после ссылки, перед таблицей -->
26    <br/>
27    <br/>
28    <table border="1px">
29        <tr>
30            <td>
31                <p>Какой-то текст в строке 1</p>
32            </td>
33            <td>
34                <p>Какой-то текст в строке 1</p>
35            </td>
36            <td>
37                <p>Какой-то текст в строке 1</p>
38            </td>
39        </tr>
40        <tr>
41            <td>
42                <p>Какой-то текст в строке 2</p>
43            </td>
44            <td>
45                <p>Какой-то текст в строке 2</p>
46            </td>
47            <td>
48                <p>Какой-то текст в строке 2</p>
49            </td>
50        </tr>
51        <tr>
52            <td>
53                <p>Какой-то текст в строке 3</p>
54            </td>
55            <td>
56                <p>Какой-то текст в строке 3</p>
57            </td>
58            <td>
59                <p>Какой-то текст в строке 3</p>
60            </td>
61        </tr>
62    </table>
63</body>
64</html>

Давайте откроем только что написанную страницу в браузере.

Видим, что отступы с помощью тега br перед ссылкой и после нее были успешно добавлены.

Также видим текст помеченный синим цветом. По нажатию на этот текст произойдет переход по ссылке. Мы задавали ссылке для перехода на ютуб. Давайте нажмем на этот текст для перехода на ютуб.

Переход на ютуб прошел успешно.

Также довольно важно рассмотреть тег form.

С ним по ходу курса мы будем встречаться не однократно.

Он нужен для отправки на сервер данных введенных пользователем в различные поля для ввода, которые находятся в теге form.

Рассмотрим пример.

1<!DOCTYPE HTML>
2<html>
3<head>
4    <title>Page tab text</title>
5</head>
6<body>
7    <!-- 
8        Это форма, в ней находятся 
9        поля для ввода 
10    -->
11    <form action="" method="POST">
12        <p>Login:
13            <!-- 
14                Тег input - тег поля для 
15                ввода данных пользователем. 
16                У него стоит атрибут 
17                type="text", значит, что это 
18                просто поле для ввода текста.
19                value - значение в поле по 
20                умолчанию 
21            -->
22            <input type="text" value="Your login">
23        </p>
24        <p>Password:
25            <!-- 
26                У input ниже тип 
27                type="password". Значит, что 
28                тоже будет вводиться текст, но 
29                при этом вводимый текст будет 
30                замаскирован. 
31            -->
32            <input type="password">
33        </p>
34        <p>
35            <!-- 
36                Тип submit означает, что данный 
37                input – это кнопка, по нажатию на 
38                которую будет происходить отправка 
39                введенных данных пользователем 
40                в input поля для ввода выше. 
41            -->
42            <input type="submit">
43        </p>
44        <!-- 
45            По нажатию на submit данные 
46            отправляются по URL в атрибуте action 
47            формы (пока в action пусто, поскольку у 
48            нас пока нет сервера), и метод отправки 
49            пишется в HTTP-метод, по которому 
50            информация передается на сервер 
51            (их тоже разберем в дальнейшем). 
52        -->
53    </form>
54</body>
55</html>

Давайте откроем только что написанную страницу в браузере.

Видим, что форма содержит три поля, как мы и определяли в html файлике.

Видим также, что сразу при открытии страницы первое поле по умолчанию содержит то, что мы писали в аттрибуте value. Это значение, конечно же, можно изменить.

Если мы напишем какой-либо текст во втором поле, то он будет замаскирован, так как с помощью аттребута type мы установили, что это поле пароля.

Если мы нажмем на кнопку то страница перезагрузиться. При этом данные, которые мы ввели должны отправиться по ссылке в аттрибуте action. Но, как уже было сказано, у нас пока нет сервера.