Атрибуты в HTML

Last updated: 9 мая 2025 г.

Мы уже рассмотрели некоторые аттрибуты типа src, href и border. Как уже можно было понять, они нужны, чтобы каким-либо образом настраивать элементы на странице.

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

Рассмотрим некоторые на примерах.

С помощью аттрибута width можем задать ширину элементам.

С помощью аттрибута height можем задать высоту элементам.

Аттрибут align может быть у некоторых html тегов. Он может размещать элементы страницы справа, по центру или слева. По умолчанию всё справа. Давайте на нашей странице разместим всё по середине.

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

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

Как видим, аттрибут align-"center" и тег <center> сработали успешно. Всё размещено по середине страницы.

Также теги width и height очевидно тоже сработали. Изменилась высота первой строки таблицы, изменилась ширина всей таблицы и изменилась ширина и высота картинки.

Выводы:

Азы html верстки можно сказать изучены.

Разных тегов и аттрибутов довольно много и лучше запоминать их с опытом верстки. Сидеть и заучивать их всех не рекомендуется. Лучше вместо этого потратить время на то чтобы самому сверстать страничку с Гуглом под рукой, но после изучения также и CSS, так как только HTML не достаточно для полноценной верстки.

Поэтому перейдем к CSS. По ходу изучения CSS будут рассмотрены и некоторые другие важные HTML теги и концепции верстки.