Правильная разметка имени автора в HTML5: альтернативы <author>

Быстрый ответ

Чтобы уточнить имя автора в HTML5, обычно применяется тег <footer>, размещённый внутри тега <article>. Имя самого автора вкладывается в тег <cite>.

Пример:

<article>
  <h1>Захватывающий заголовок — залог внимания читателя!</h1>
  <p>Содержимое, которое вызывает восторг и интерес.</p>
  <footer>Автор: <cite>Имя автора здесь.</cite></footer>
</article>

Ключевые идеи:

• <footer>: Идеальное место для указания автора внутри статьи.
• <cite>: Подчеркивает имя автора, акцентируя его значимость.

Сокращаем семантическое пространство

Давайте шаг за шагом разберёмся, как выстроить прочную семантическую структуру вашего HTML5 кода, руководствуясь предыдущим быстрым ответом.

Преображаем оптимальный путь

Внутри <article> элемент <header> служит для вступления в контент. В <footer> добавляем элемент <address> для контактной информации автора. Если автор имеет свой сайт, используем тег <a> с атрибутом rel="author" для ссылки на его страницу.

Подробнее об этом расскажет наш спикер на видео

Вглубь микроформатов и микроданных

Применяйте микроформаты, как например hCard, и атрибуты itemprop с микроданными, для улучшения возможности чтения предоставленной информации о авторе машинами. Это также помогает поисковым сервисам и другим интернет-сервисам точнее интерпретировать данные.

Осваиваем язык времени

Укажите дату публикации с помощью элемента <time>, дополнив его атрибутом datetime. Это следует сделать близко к имени автора, создавая тем самым единую и цельную структуру.

Пример кода

<article itemscope itemtype="http://schema.org/Article">
  <header>
    <h1 itemprop="headline">"Заманчивый заголовок! Доказанный способ привлечения внимания!"</h1>
    <p><time itemprop="datePublished" datetime="2023-01-15">"Вечный момент..."</time></p>
  </header>
  <!-- Здесь начинается захватывающий контент... -->
  <footer>
    <address itemprop="author" itemscope itemtype="http://schema.org/Person">
      Автор: <a href="http://www.authorwebsite.com" rel="author" itemprop="url"><span itemprop="name">"От автора. Приветствуем знакомых!"</span></a>
    </address>
  </footer>
</article>

Ключевые идеи:

• <header> и <footer>: Структурные элементы для вводной и заключительной части материала.
• Микроданные: Атрибуты itemprop, itemscope и itemtype обогащают описание контента.
• Тег <time>: Маркирует даты публикаций.

Визуализация

Представьте HTML-теги как разными элементами гардероба:

- `<strong>` = 🧥 (Делает ваше утверждение сильным)
- `<em>` = 👕 (Выделяет вашу интонацию)
- `<b>` = 👔 (Выражает уверенность)
- `<i>` = 🎩 (Добавляет изящество)

Для разметки имени автора мы используем:

<address>📇</address>

📇 – подобно визитной карте на значимом событии, она изящно представляет имя нашего автора.

Завершение

Помимо выделения имени автора, описанные методы и подходы дают надёжную основу для глубокого понимания сути семантического HTML и его практического использования. Тренируйтесь, экспериментируйте и развивайте эти концепции, чтобы стать мастером кодирования. И не забывайте: сколь бы сложной ни была синтаксис, хорошая шутка в комментариях всегда повышает настроение!

Удачи в кодировании! 👩‍💻

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

Полезные материалы

1. HTML Стандарт — Официальное руководство
2. HTML Тег Address — Обучение с W3Schools
3. Тип Schema.org – Person — Сведения о типе Person на Schema.org
4. Доступные богатые интернет-приложения (WAI-ARIA) 1.3 — Делаем интернет доступным для всех
5. Справочник по HTML-элементам – HTML: HyperText Markup Language | MDN — Информация о семантическом HTML от Mozilla
6. Свежие вопросы по 'html+semantic-markup' – Stack Overflow — Обмен опытом с коллегами