0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>24 июл 2025</li>
2
<ul><li>24 июл 2025</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Рассказываем, зачем нужен тег < footer >, что можно в него добавить и как правильно сверстать подвал сайта - адаптивный, с контактами и ссылками.</p>
4
</ul><p>Рассказываем, зачем нужен тег < footer >, что можно в него добавить и как правильно сверстать подвал сайта - адаптивный, с контактами и ссылками.</p>
5
<p>Иллюстрация: Оля Ежак для SKillbox Media</p>
5
<p>Иллюстрация: Оля Ежак для SKillbox Media</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
7
<p>Блок в самом низу страницы, где обычно размещают контакты, ссылки на важные разделы, соцсети и юридическую информацию, называется подвалом. Он есть на абсолютном большинстве сайтов, и без него сложно представить себе веб-страницу.</p>
7
<p>Блок в самом низу страницы, где обычно размещают контакты, ссылки на важные разделы, соцсети и юридическую информацию, называется подвалом. Он есть на абсолютном большинстве сайтов, и без него сложно представить себе веб-страницу.</p>
8
<p>В HTML за подвал отвечает тег <footer>. Поговорим о том, как его правильно использовать.</p>
8
<p>В HTML за подвал отвечает тег <footer>. Поговорим о том, как его правильно использовать.</p>
9
<p><strong>Содержание</strong></p>
9
<p><strong>Содержание</strong></p>
10
<ul><li><a>Что делает тег <footer></a></li>
10
<ul><li><a>Что делает тег <footer></a></li>
11
<li><a>Когда и зачем использовать <footer></a></li>
11
<li><a>Когда и зачем использовать <footer></a></li>
12
<li><a>Чем <footer> отличается от <div></a></li>
12
<li><a>Чем <footer> отличается от <div></a></li>
13
<li><a>Как сверстать подвал на HTML</a></li>
13
<li><a>Как сверстать подвал на HTML</a></li>
14
<li><a>Как оформить <footer> с помощью CSS</a></li>
14
<li><a>Как оформить <footer> с помощью CSS</a></li>
15
<li><a>Адаптивный подвал</a></li>
15
<li><a>Адаптивный подвал</a></li>
16
<li><a>Фиксированный подвал</a></li>
16
<li><a>Фиксированный подвал</a></li>
17
<li><a>Частые ошибки</a></li>
17
<li><a>Частые ошибки</a></li>
18
<li><a>Полезные советы</a></li>
18
<li><a>Полезные советы</a></li>
19
</ul><p>Тег <footer> в HTML - семантический: он сообщает браузерам, поисковым системам и приложениям для людей с ограниченными возможностями здоровья, что внутри размещён дополнительный или справочный контент.</p>
19
</ul><p>Тег <footer> в HTML - семантический: он сообщает браузерам, поисковым системам и приложениям для людей с ограниченными возможностями здоровья, что внутри размещён дополнительный или справочный контент.</p>
20
<p>Подвал обычно располагается внизу страницы и содержит:</p>
20
<p>Подвал обычно располагается внизу страницы и содержит:</p>
21
<ul><li>контактную информацию (телефон, email);</li>
21
<ul><li>контактную информацию (телефон, email);</li>
22
<li>ссылки на важные разделы - "О компании", "Политика конфиденциальности", "Помощь";</li>
22
<li>ссылки на важные разделы - "О компании", "Политика конфиденциальности", "Помощь";</li>
23
<li>кнопки соцсетей;</li>
23
<li>кнопки соцсетей;</li>
24
<li>юридические данные и копирайт;</li>
24
<li>юридические данные и копирайт;</li>
25
<li>логотипы и виджеты.</li>
25
<li>логотипы и виджеты.</li>
26
</ul><p>Тег <footer> можно использовать не только для всей страницы, но и для отдельных разделов - например, статьи <article> или карточки товара. В этом случае он завершает только конкретный фрагмент контента.</p>
26
</ul><p>Тег <footer> можно использовать не только для всей страницы, но и для отдельных разделов - например, статьи <article> или карточки товара. В этом случае он завершает только конкретный фрагмент контента.</p>
27
<p>На типовом сайте с несколькими разделами <footer> обычно размещают один раз - в самом конце страницы. Он общий для всего сайта и повторяется на всех страницах.</p>
27
<p>На типовом сайте с несколькими разделами <footer> обычно размещают один раз - в самом конце страницы. Он общий для всего сайта и повторяется на всех страницах.</p>
28
<p>Но можно использовать и несколько подвалов на одной странице. Например:</p>
28
<p>Но можно использовать и несколько подвалов на одной странице. Например:</p>
29
<ul><li>внутри тега <article> - для вывода информации об авторе статьи, даты публикации или ссылки на источник;</li>
29
<ul><li>внутри тега <article> - для вывода информации об авторе статьи, даты публикации или ссылки на источник;</li>
30
<li>в карточке товара - для блока с кнопкой "Купить" или ссылкой "Добавить в избранное".</li>
30
<li>в карточке товара - для блока с кнопкой "Купить" или ссылкой "Добавить в избранное".</li>
31
</ul><article> <h2>Новость</h2> <p>Текст статьи...</p> <footer>Источник: <a href="#">example.com</a></footer> </article><p>Если вы делаете очень короткий одностраничник (например, промолендинг), отдельный <footer> может не понадобиться - достаточно структурировать контент с помощью общих блоков и не выделять подвал как отдельную часть. Но даже на таких страницах подвал часто добавляют ради знака копирайта или ссылок на оферту.</p>
31
</ul><article> <h2>Новость</h2> <p>Текст статьи...</p> <footer>Источник: <a href="#">example.com</a></footer> </article><p>Если вы делаете очень короткий одностраничник (например, промолендинг), отдельный <footer> может не понадобиться - достаточно структурировать контент с помощью общих блоков и не выделять подвал как отдельную часть. Но даже на таких страницах подвал часто добавляют ради знака копирайта или ссылок на оферту.</p>
32
<p>Технически вы можете создать подвал с помощью любого контейнера, например обычного тега <div> - пустого контейнера:</p>
32
<p>Технически вы можете создать подвал с помощью любого контейнера, например обычного тега <div> - пустого контейнера:</p>
33
<div class="footer"> <p>(c) 2025 Компания</p> </div><p>Но с точки зрения семантики и удобства лучше использовать<em><footer></em>. Это помогает:</p>
33
<div class="footer"> <p>(c) 2025 Компания</p> </div><p>Но с точки зрения семантики и удобства лучше использовать<em><footer></em>. Это помогает:</p>
34
<ul><li>структурировать страницу,</li>
34
<ul><li>структурировать страницу,</li>
35
<li>повысить доступность,</li>
35
<li>повысить доступность,</li>
36
<li>сделать код более читаемым для других разработчиков и браузеров.</li>
36
<li>сделать код более читаемым для других разработчиков и браузеров.</li>
37
</ul><p>Одним словом, если блок действительно выполняет функцию подвала, используйте <footer>. Это не только правильно с точки зрения HTML5, но и делает вёрстку более понятной и чистой.</p>
37
</ul><p>Одним словом, если блок действительно выполняет функцию подвала, используйте <footer>. Это не только правильно с точки зрения HTML5, но и делает вёрстку более понятной и чистой.</p>
38
<p>Тег <footer> - парный, то есть состоит из открывающего и закрывающего тегов:</p>
38
<p>Тег <footer> - парный, то есть состоит из открывающего и закрывающего тегов:</p>
39
<footer> <!-- Содержимое подвала --> </footer><p>Тег <footer> размещается внутри тега <body>, обычно в самом конце документа - сразу после основного контента. Внутри него можно использовать любые блочные и строчные элементы: заголовки, списки, ссылки, абзацы, изображения и другие теги.</p>
39
<footer> <!-- Содержимое подвала --> </footer><p>Тег <footer> размещается внутри тега <body>, обычно в самом конце документа - сразу после основного контента. Внутри него можно использовать любые блочные и строчные элементы: заголовки, списки, ссылки, абзацы, изображения и другие теги.</p>
40
<p>Вот пример простого подвала с текстом:</p>
40
<p>Вот пример простого подвала с текстом:</p>
41
<footer> <p>(c) 2025 Компания "ВЕКТОР". Все права защищены.</p> </footer><p>Когда вы пишете HTML-код, все элементы сначала выглядят просто как чёрный текст на белом фоне. Чтобы подвал был заметным и аккуратным, его нужно оформить с помощью CSS - это специальный язык, который управляет внешним видом страницы.</p>
41
<footer> <p>(c) 2025 Компания "ВЕКТОР". Все права защищены.</p> </footer><p>Когда вы пишете HTML-код, все элементы сначала выглядят просто как чёрный текст на белом фоне. Чтобы подвал был заметным и аккуратным, его нужно оформить с помощью CSS - это специальный язык, который управляет внешним видом страницы.</p>
42
<p>Вот как это сделать шаг за шагом.</p>
42
<p>Вот как это сделать шаг за шагом.</p>
43
<p>Создайте на компьютере папку с проектом. Внутри неё создайте два текстовых файла:</p>
43
<p>Создайте на компьютере папку с проектом. Внутри неё создайте два текстовых файла:</p>
44
<ul><li>index.html - основной файл страницы;</li>
44
<ul><li>index.html - основной файл страницы;</li>
45
<li>styles.css - файл со стилями.</li>
45
<li>styles.css - файл со стилями.</li>
46
</ul><p>Откройте файл index.html в любом текстовом редакторе (например, в VS Code или Notepad++) и вставьте базовую структуру HTML:</p>
46
</ul><p>Откройте файл index.html в любом текстовом редакторе (например, в VS Code или Notepad++) и вставьте базовую структуру HTML:</p>
47
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Мой сайт</title> </head> <body> <!-- Основное содержимое страницы --> <h1>Добро пожаловать на сайт</h1> <p>Здесь будет какой-то контент.</p> <!-- Подвал страницы --> <footer> <p>(c) 2025 Компания "Пример". Все права защищены.</p> </footer> </body> </html><p>В своём HTML-файле найдите тег <footer> и добавьте ему атрибут class. Это ярлык, по которому мы будем применять стили.</p>
47
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Мой сайт</title> </head> <body> <!-- Основное содержимое страницы --> <h1>Добро пожаловать на сайт</h1> <p>Здесь будет какой-то контент.</p> <!-- Подвал страницы --> <footer> <p>(c) 2025 Компания "Пример". Все права защищены.</p> </footer> </body> </html><p>В своём HTML-файле найдите тег <footer> и добавьте ему атрибут class. Это ярлык, по которому мы будем применять стили.</p>
48
<footer class="site-footer"> <p>(c) 2025 Компания "Пример". Все права защищены.</p> </footer><p>Здесь .site-footer - это имя класса. Вы можете назвать его как угодно, главное - использовать это же имя в CSS.</p>
48
<footer class="site-footer"> <p>(c) 2025 Компания "Пример". Все права защищены.</p> </footer><p>Здесь .site-footer - это имя класса. Вы можете назвать его как угодно, главное - использовать это же имя в CSS.</p>
49
<p>В HTML-документе найдите тег <head> и добавьте туда под тегом <title> вот такую строчку:</p>
49
<p>В HTML-документе найдите тег <head> и добавьте туда под тегом <title> вот такую строчку:</p>
50
<link rel="stylesheet" href="styles.css"><p>Это нужно, чтобы браузер понял: внешний вид страницы описан в файле style.css.</p>
50
<link rel="stylesheet" href="styles.css"><p>Это нужно, чтобы браузер понял: внешний вид страницы описан в файле style.css.</p>
51
<p>Откройте файл styles.css и добавьте в него следующие строки:</p>
51
<p>Откройте файл styles.css и добавьте в него следующие строки:</p>
52
.site-footer { background-color: #f0f0f0; /* Светлый фон */ padding: 20px; /* Отступы вокруг текста */ text-align: center; /* Выравнивание по центру */ font-size: 14px; /* Размер шрифта */ color: #333; /* Тёмно-серый текст */ }<p>Сохраните оба файла. Откройте HTML-файл в браузере. Подвал должен быть светлым, с отступами и аккуратным текстом.</p>
52
.site-footer { background-color: #f0f0f0; /* Светлый фон */ padding: 20px; /* Отступы вокруг текста */ text-align: center; /* Выравнивание по центру */ font-size: 14px; /* Размер шрифта */ color: #333; /* Тёмно-серый текст */ }<p>Сохраните оба файла. Откройте HTML-файл в браузере. Подвал должен быть светлым, с отступами и аккуратным текстом.</p>
53
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Если что-то не сработало, убедитесь:</p>
53
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Если что-то не сработало, убедитесь:</p>
54
<ul><li>что имя класса (site-footer) совпадает в HTML и CSS;</li>
54
<ul><li>что имя класса (site-footer) совпадает в HTML и CSS;</li>
55
<li>файл styles.css лежит в той же папке, что и HTML-файл;</li>
55
<li>файл styles.css лежит в той же папке, что и HTML-файл;</li>
56
<li>вы сохранили оба файла перед открытием в браузере.</li>
56
<li>вы сохранили оба файла перед открытием в браузере.</li>
57
</ul><p>На компьютере подвал обычно растянут по ширине, и его содержимое удобно размещать в одну строку. Но на смартфонах экран уже, и элементы, стоящие рядом, начинают съезжать или сжиматься. Чтобы этого не происходило, подвал нужно сделать адаптивным - то есть таким, который подстраивается под размер экрана.</p>
57
</ul><p>На компьютере подвал обычно растянут по ширине, и его содержимое удобно размещать в одну строку. Но на смартфонах экран уже, и элементы, стоящие рядом, начинают съезжать или сжиматься. Чтобы этого не происходило, подвал нужно сделать адаптивным - то есть таким, который подстраивается под размер экрана.</p>
58
<p>Допустим, в подвале есть два блока:</p>
58
<p>Допустим, в подвале есть два блока:</p>
59
<ul><li>список ссылок;</li>
59
<ul><li>список ссылок;</li>
60
<li>контакты (телефон и email).</li>
60
<li>контакты (телефон и email).</li>
61
</ul><p>На широком экране они будут расположены рядом, а на узком - один под другим</p>
61
</ul><p>На широком экране они будут расположены рядом, а на узком - один под другим</p>
62
<p><strong>HTML-код</strong></p>
62
<p><strong>HTML-код</strong></p>
63
<footer class="site-footer"> <div class="footer-container"> <!-- Меню со ссылками --> <nav> <ul class="footer-nav"> <li><a href="#">О нас</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> <!-- Блок с контактами --> <ul class="footer-contacts"> <li><a href="tel:+71234567890">Телефон: +7 (123) 456-78-90</a></li> <li><a href="mailto:info@company.ru">Email: info@company.ru</a></li> </ul> </div> </footer><p><strong>Что здесь важно:</strong></p>
63
<footer class="site-footer"> <div class="footer-container"> <!-- Меню со ссылками --> <nav> <ul class="footer-nav"> <li><a href="#">О нас</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> <!-- Блок с контактами --> <ul class="footer-contacts"> <li><a href="tel:+71234567890">Телефон: +7 (123) 456-78-90</a></li> <li><a href="mailto:info@company.ru">Email: info@company.ru</a></li> </ul> </div> </footer><p><strong>Что здесь важно:</strong></p>
64
<ul><li><nav> - тег, который обозначает меню со ссылками, чтобы браузер понимал, что это навигация.</li>
64
<ul><li><nav> - тег, который обозначает меню со ссылками, чтобы браузер понимал, что это навигация.</li>
65
<li>Класс site-footer нужен для стилизации всего подвала.</li>
65
<li>Класс site-footer нужен для стилизации всего подвала.</li>
66
<li>Контактные данные - элементы списка <li>.</li>
66
<li>Контактные данные - элементы списка <li>.</li>
67
<li>Телефон оформлен через tel:, чтобы можно было звонить с мобильных.</li>
67
<li>Телефон оформлен через tel:, чтобы можно было звонить с мобильных.</li>
68
<li>Email оформлен через mailto:, чтобы по клику открывалось почтовое приложение.</li>
68
<li>Email оформлен через mailto:, чтобы по клику открывалось почтовое приложение.</li>
69
</ul><p>Теперь напишем стили с поддержкой адаптивности:</p>
69
</ul><p>Теперь напишем стили с поддержкой адаптивности:</p>
70
.site-footer { background-color: #f0f0f0; /* Светло-серый фон подвала */ padding: 20px 0; /* Отступ сверху и снизу */ } .footer-container { display: flex; /* Flex-контейнер для горизонтального расположения */ align-items: center; /* Выравниваем блоки по вертикали */ flex-wrap: wrap; /* Позволяем блокам переноситься при нехватке места */ gap: 20px; /* Промежуток между блоками */ max-width: 1200px; /* Ограничиваем максимальную ширину контейнера */ margin: 0 auto; /* Центрируем контейнер в пределах подвала */ padding: 0 20px; /* Горизонтальные отступы на десктопе */ } .footer-nav, .footer-contacts { margin: 0; /* Убираем лишние вертикальные отступы */ } .footer-nav li, .footer-contacts li { list-style: none; /* Убираем маркеры списка */ margin-bottom: 5px; /* Отступ между пунктами списка */ } .footer-nav a, .footer-contacts a { text-decoration: none; /* Убираем подчёркивание у ссылок */ color: #333; /* Цвет текста ссылок */ }<p>Добавим медиазапрос - специальное CSS-правило, которое применяется только при определённой ширине экрана. Для этого в конец файла style.css добавим вот этот текст:</p>
70
.site-footer { background-color: #f0f0f0; /* Светло-серый фон подвала */ padding: 20px 0; /* Отступ сверху и снизу */ } .footer-container { display: flex; /* Flex-контейнер для горизонтального расположения */ align-items: center; /* Выравниваем блоки по вертикали */ flex-wrap: wrap; /* Позволяем блокам переноситься при нехватке места */ gap: 20px; /* Промежуток между блоками */ max-width: 1200px; /* Ограничиваем максимальную ширину контейнера */ margin: 0 auto; /* Центрируем контейнер в пределах подвала */ padding: 0 20px; /* Горизонтальные отступы на десктопе */ } .footer-nav, .footer-contacts { margin: 0; /* Убираем лишние вертикальные отступы */ } .footer-nav li, .footer-contacts li { list-style: none; /* Убираем маркеры списка */ margin-bottom: 5px; /* Отступ между пунктами списка */ } .footer-nav a, .footer-contacts a { text-decoration: none; /* Убираем подчёркивание у ссылок */ color: #333; /* Цвет текста ссылок */ }<p>Добавим медиазапрос - специальное CSS-правило, которое применяется только при определённой ширине экрана. Для этого в конец файла style.css добавим вот этот текст:</p>
71
@media (max-width: 600px) { .footer-container { flex-direction: column; /* На мобильных блоки идут вертикально */ align-items: flex-start;/* Выравниваем по левому краю */ text-align: left; /* Выравниваем текст по левому краю */ gap: 10px; /* Меньший промежуток между блоками */ padding: 0 0px; /* Меньше горизонтальные отступы слева и справа */ } .footer-nav, .footer-contacts { margin: 10px 0; /* Вертикальные отступы между блоками на мобильных */ } }<p>Теперь, если ширина окна браузера 600 пикселей или меньше, подвал перестраивается. Вместо горизонтальной вёрстки (row) включается вертикальная (column).</p>
71
@media (max-width: 600px) { .footer-container { flex-direction: column; /* На мобильных блоки идут вертикально */ align-items: flex-start;/* Выравниваем по левому краю */ text-align: left; /* Выравниваем текст по левому краю */ gap: 10px; /* Меньший промежуток между блоками */ padding: 0 0px; /* Меньше горизонтальные отступы слева и справа */ } .footer-nav, .footer-contacts { margin: 10px 0; /* Вертикальные отступы между блоками на мобильных */ } }<p>Теперь, если ширина окна браузера 600 пикселей или меньше, подвал перестраивается. Вместо горизонтальной вёрстки (row) включается вертикальная (column).</p>
72
<p>Версия для больших экранов:</p>
72
<p>Версия для больших экранов:</p>
73
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Версия для мобильных:</p>
73
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Версия для мобильных:</p>
74
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Иногда нужно, чтобы подвал всегда оставался внизу экрана, даже если на странице мало контента. Такой подвал называют фиксированным.</p>
74
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Иногда нужно, чтобы подвал всегда оставался внизу экрана, даже если на странице мало контента. Такой подвал называют фиксированным.</p>
75
<p>Это полезно, например, если вы хотите, чтобы контактная информация или кнопка были всегда на виду.</p>
75
<p>Это полезно, например, если вы хотите, чтобы контактная информация или кнопка были всегда на виду.</p>
76
<p>Для этого используют CSS-свойства position: fixed и bottom: 0.</p>
76
<p>Для этого используют CSS-свойства position: fixed и bottom: 0.</p>
77
<p>Возьмём наш подвал из предыдущих разделов и пропишем ему класс fixed-footer:</p>
77
<p>Возьмём наш подвал из предыдущих разделов и пропишем ему класс fixed-footer:</p>
78
<footer class="fixed-footer"> <p>(c) 2025 Компания "Пример"</p> </footer><p>Теперь добавим вот этот код в файл style.css:</p>
78
<footer class="fixed-footer"> <p>(c) 2025 Компания "Пример"</p> </footer><p>Теперь добавим вот этот код в файл style.css:</p>
79
.fixed-footer { position: fixed; /* Фиксируем подвал */ bottom: 0; /* Прижимаем к нижнему краю */ left: 0; width: 100%; /* На всю ширину экрана */ background-color: #f0f0f0; padding: 10px 20px; text-align: center; font-size: 14px; }<p>Если подвал фиксированный, остальной контент может оказаться под ним. Чтобы избежать этого, добавьте отступ снизу у <body> или у основного контейнера:</p>
79
.fixed-footer { position: fixed; /* Фиксируем подвал */ bottom: 0; /* Прижимаем к нижнему краю */ left: 0; width: 100%; /* На всю ширину экрана */ background-color: #f0f0f0; padding: 10px 20px; text-align: center; font-size: 14px; }<p>Если подвал фиксированный, остальной контент может оказаться под ним. Чтобы избежать этого, добавьте отступ снизу у <body> или у основного контейнера:</p>
80
body { padding-bottom: 60px; /* Высота подвала + запас */ }<p>При работе с тегом <footer> сложно ошибиться, он очень прост. Но можно допустить ошибки, которые встречаются при работе со всеми HTML-тегами вообще. Вот самые распространённые:</p>
80
body { padding-bottom: 60px; /* Высота подвала + запас */ }<p>При работе с тегом <footer> сложно ошибиться, он очень прост. Но можно допустить ошибки, которые встречаются при работе со всеми HTML-тегами вообще. Вот самые распространённые:</p>
81
<p>Некоторые новички по ошибке вставляют <footer> вне тега <body>. Это нарушает структуру документа и может привести к ошибкам в отображении.</p>
81
<p>Некоторые новички по ошибке вставляют <footer> вне тега <body>. Это нарушает структуру документа и может привести к ошибкам в отображении.</p>
82
<p>Ошибка:</p>
82
<p>Ошибка:</p>
83
</body> <footer>...</footer> </html><p>Правильно:</p>
83
</body> <footer>...</footer> </html><p>Правильно:</p>
84
<footer>...</footer> </body> </html><p>Всё содержимое страницы должно быть внутри <body> - и подвал тоже.</p>
84
<footer>...</footer> </body> </html><p>Всё содержимое страницы должно быть внутри <body> - и подвал тоже.</p>
85
<p>В HTML5 можно использовать несколько <footer>, но не нужно вставлять его в каждый блок без причины. Тег <footer> должен завершать смысловой раздел, а не просто быть "нижним прямоугольником".</p>
85
<p>В HTML5 можно использовать несколько <footer>, но не нужно вставлять его в каждый блок без причины. Тег <footer> должен завершать смысловой раздел, а не просто быть "нижним прямоугольником".</p>
86
<p>Вместо лишнего <footer> можно использовать <div> с нужным классом для оформления.</p>
86
<p>Вместо лишнего <footer> можно использовать <div> с нужным классом для оформления.</p>
87
<p>Не забывайте о том, что <footer> - парный тег и ему нужна закрывающая часть </footer>.</p>
87
<p>Не забывайте о том, что <footer> - парный тег и ему нужна закрывающая часть </footer>.</p>
88
<footer> <ul> <li><a href="#">О нас</a></li> <li><a href="#">Контакты</a></li> </ul> <footer> <!-- Забыли слэш в </footer> --><p>Нельзя закрывать теги не в том порядке, в котором они были открыты:</p>
88
<footer> <ul> <li><a href="#">О нас</a></li> <li><a href="#">Контакты</a></li> </ul> <footer> <!-- Забыли слэш в </footer> --><p>Нельзя закрывать теги не в том порядке, в котором они были открыты:</p>
89
<footer> <p>Email: info@company.ru</footer> </p><p><strong>Правильно:</strong></p>
89
<footer> <p>Email: info@company.ru</footer> </p><p><strong>Правильно:</strong></p>
90
<footer> <p>Email: info@company.ru</p> </footer><p>Например, есть сайт<a>validator.w3.org</a>. Он подскажет, если вы забыли закрыть тег или допустили другую ошибку.</p>
90
<footer> <p>Email: info@company.ru</p> </footer><p>Например, есть сайт<a>validator.w3.org</a>. Он подскажет, если вы забыли закрыть тег или допустили другую ошибку.</p>
91
<p>Размещайте только действительно важную информацию. Лучше оставить 3-4 ключевых блока (контакты, меню, соцсети, копирайт), чем превращать подвал в свалку ссылок и логотипов.</p>
91
<p>Размещайте только действительно важную информацию. Лучше оставить 3-4 ключевых блока (контакты, меню, соцсети, копирайт), чем превращать подвал в свалку ссылок и логотипов.</p>
92
<p>Можно комбинировать <footer> с другими тегами:</p>
92
<p>Можно комбинировать <footer> с другими тегами:</p>
93
<ul><li><nav> - для ссылок внутри подвала;</li>
93
<ul><li><nav> - для ссылок внутри подвала;</li>
94
<li><address> - для контактной информации.</li>
94
<li><address> - для контактной информации.</li>
95
</ul><a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>
95
</ul><a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>