Как сделать подпись на сайте: автор, фото и документы 2026

Подпись на сайте может означать три разные вещи: имя автора материала, пояснение под изображением или юридически значимую электронную подпись документа. Первые две задачи решаются обычным HTML и CSS. Для третьей недостаточно вывести имя, картинку росчерка или галочку, потому что электронная подпись связана с идентификацией человека и правилами электронного взаимодействия.

Как определить нужный вид подписи

Сначала назовите результат, который должен получить посетитель. Если нужно понять, кто написал статью, делайте блок автора. Если нужно объяснить фотографию, используйте подпись к изображению. Если пользователь должен подписать договор или заявление, остановитесь на проектировании процесса и выясните правовые требования до написания интерфейса.

• Авторство: посетитель видит имя, роль, дату и может открыть страницу автора.
• Изображение: посетитель понимает, что показано, кто создал материал и откуда он взят.
• Электронный документ: система определяет подписанта, связывает подпись с документом и позволяет проверить установленный законом или соглашением способ подписания.
• Декоративный росчерк: это только оформление, если за ним нет процедуры идентификации и проверки.

Правило выбора: если подпись должна что-то доказать вне страницы, сначала определите юридическое основание и способ проверки. Видимый текст внизу сайта доказывает только то, что этот текст отрисовал сайт.

Подпись автора статьи

Для статьи достаточно обычного текстового блока внутри article. Имя лучше сделать ссылкой на страницу автора и добавить rel="author". Стандарт HTML определяет это значение как ссылку на сведения об авторе ближайшего article или всей страницы (HTML Living Standard).

<article>
  <h1>Как выбрать свет для домашнего фото</h1>
  <p class="byline">
    Автор: <a href="/authors/anna-petrova/" rel="author">Анна Петрова</a>
    <time datetime="2026-08-13">13 августа 2026</time>
  </p>
  <!-- текст статьи -->
</article>

Страница автора должна подтверждать подпись: короткая биография, область ответственности, список материалов и способ связаться с редакцией. Не придумывайте должность и квалификацию только ради доверия. Если материал пишет команда, укажите редакцию и объясните процесс проверки на отдельной странице. Для структуры самой публикации пригодится инструкция по посту на сайте.

В России автором произведения признаётся гражданин, творческим трудом которого оно создано; указанное на экземпляре лицо считается автором, если не доказано иное (статья 1257 ГК РФ). Блок автора помогает читателю увидеть атрибуцию, но не решает сам по себе спор о правах и не заменяет договор с автором.

Оформление блока автора через CSS

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  align-items: baseline;
  color: #5b5b5b;
  font-size: 0.95rem;
}
.byline a { color: inherit; text-underline-offset: 0.18em; }
.byline time { white-space: nowrap; }

flex-wrap переносит дату на следующую строку на узком экране, поэтому имя не вылезает за границу. Не делайте имя автора картинкой: текст нельзя нормально увеличить, скопировать или прочитать вспомогательной программой. Аватар можно добавить отдельно, но имя и роль оставьте текстом.

По теме: Как сделан сайт Одноклассники: архитектура простыми словами

Подпись под фотографией или схемой

Свяжите изображение и подпись элементами figure и figcaption. Стандарт HTML прямо описывает figure как самостоятельный фрагмент потока, а первый дочерний figcaption как его подпись (HTML Living Standard).

<figure class="media">
  <img
    src="/images/workspace-before.jpg"
    alt="Стол до организации: провода лежат перед монитором"
    width="1200"
    height="800"
  >
  <figcaption>
    Рабочее место до организации кабелей. Фото: Анна Петрова, 2026.
  </figcaption>
</figure>

У alt и figcaption разные задачи. Альтернативный текст передаёт смысл изображения, когда его не видно. Подпись видна всем и может добавить источник, дату, контекст или пояснение. Не повторяйте одну и ту же длинную фразу в обоих местах. Если изображение чисто декоративное, используйте пустой alt="", а не описание ради заполнения поля.

Если на странице много фотографий, заранее выберите один формат подписи: что показано, место или дата при необходимости, автор, источник или лицензия. Это первое практическое правило: обязательные части подписи зависят от происхождения файла, а не от внешнего вида карточки. Собственное фото требует честного автора, стороннее фото требует ещё основания использования.

CSS для изображения и подписи

.media { margin: 1.5rem 0; }
.media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}
.media figcaption {
  margin-top: 0.5rem;
  color: #5b5b5b;
  font-size: 0.9rem;
  line-height: 1.45;
}

Ширина 100% и автоматическая высота сохраняют пропорции изображения внутри контейнера. Атрибуты width и height в HTML помогают браузеру заранее зарезервировать место. Если вы только собираете галерею, сначала пройдите инструкцию по сайту с картинками, затем добавьте единый формат источников.

Как проверить обе обычные подписи

Второй практический элемент, проверка в трёх режимах. Она ловит не только визуальные ошибки, но и разрыв между подписью и материалом.

1. Смысл. Имя ведёт к правильному автору, подпись к фото описывает именно соседнее изображение, дата и источник не противоречат странице.
2. Узкий экран. Откройте страницу на ширине около 320 пикселей, увеличьте текст браузером, проверьте перенос имени, даты и длинного источника.
3. Без картинки и стилей. Временно заблокируйте изображение и CSS. Заголовок, автор, alt и подпись должны оставаться понятными в порядке чтения.
4. Клавиатура. Перейдите по ссылке автора клавишей Tab, убедитесь, что фокус виден и ссылка открывает ожидаемую страницу.
5. Данные. Сверьте написание имени, год, лицензию и источник с оригиналом, а не с памятью редактора.

По теме: Как посмотреть, как сделан сайт: DevTools без взлома

Почему имя или рисунок не равны электронной подписи

Федеральный закон № 63-ФЗ различает простую электронную подпись, усиленную неквалифицированную и усиленную квалифицированную. ФНС поясняет, что вид подписи при взаимодействии людей и организаций может определяться законом или соглашением, а квалифицированная подпись имеет отдельные требования (раздел ФНС о применении электронной подписи).

Текст «Иван согласен», картинка рукописной подписи или отмеченный чекбокс не становятся квалифицированной электронной подписью из-за внешнего сходства. Даже простая электронная подпись требует способа подтвердить, что действие выполнило определённое лицо, а условия признания электронного документа зависят от закона и правил взаимодействия. Поэтому дизайнер интерфейса не должен самостоятельно обещать юридическую силу.

• Определите вид документа, стороны, применимый закон и обязательный вид подписи.
• Попросите юриста описать, как идентифицируется подписант и какие доказательства нужно хранить.
• Выберите готового оператора или техническую схему только после требований, а не по внешнему виду кнопки.
• Свяжите согласие с конкретной версией документа, временем, учётной записью и журналом действий в пределах согласованной схемы.
• Дайте пользователю скачать или получить подписанный документ и понятный способ проверить подпись.

ФНС отдельно указывает, что при проверке квалифицированной подписи используется специализированное средство и сертификат, а ошибка проверки означает, что подпись недействительна и авторство документа не подтверждено (официальная памятка ФНС). Обычный HTML-блок такой проверки не выполняет.

Диагностика частых ошибок

• Автор указан, но ссылка ведёт на главную: создайте отдельную страницу автора или уберите ложную ссылку.
• Дата слипается с именем на телефоне: разрешите перенос строки и проверьте увеличение текста.
• Подпись к фото уехала к следующему изображению: объедините изображение и figcaption внутри одного figure.
• Читатель слышит одно и то же дважды: сократите alt до визуального смысла, а в figcaption оставьте контекст и источник.
• Чекбокс назван электронной подписью без оснований: замените обещание нейтральным текстом и отправьте процесс на юридическую проверку.
• Картинка росчерка загружается с чужого адреса: удалите её, потому что она не доказывает личность и может нарушать права или конфиденциальность.

По теме: Как восстановить старый сайт: архив, файлы и запуск в 2026

Когда простой HTML не подходит

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

После внедрения проверьте подписи вместе с остальной страницей по чек-листу хорошего сайта. Если подпись корректна, но её невозможно прочитать на телефоне или открыть с клавиатуры, задача ещё не завершена.

Частые вопросы

Нужен ли тег cite для имени автора?

Не обязательно. Для ссылки на страницу автора используйте обычный a с rel="author". cite предназначен для названия творческой работы, а не для имени человека.

Можно ли поставить подпись под фоновой картинкой?

Если картинка несёт смысл, лучше вывести её обычным img внутри figure, чтобы дать alt и связать с figcaption. Декоративному фону подпись обычно не нужна.

Достаточно ли написать «согласен» рядом с кнопкой?

Для информирования о действии это может быть частью интерфейса. Для юридической силы нужно отдельно определить документ, способ идентификации, требования закона или соглашения и доказательства действия.

Нужно ли добавлять год к подписи фото?

Добавляйте год, когда он помогает понять актуальность или входит в требования источника и лицензии. Не ставьте дату, которую не можете подтвердить.