Микроформаты в HTML

Микроформаты предоставляют простой способ добавления семантики в HTML.

1. Микроформат h-card для контактной информации

<div class="h-card">
    <img class="u-photo" src="https://example.com/photo.jpg" alt="Фото Ивана">
    
    <div class="p-name">Иван Иванов</div>
    
    <div class="p-org">Компания "Пример"</div>
    
    <div class="p-job-title">Старший разработчик</div>
    
    <div>
        <a class="u-email" href="mailto:ivan@example.com">ivan@example.com</a>
    </div>
    
    <div>
        <a class="u-url" href="https://example.com">example.com</a>
    </div>
    
    <div class="p-tel">+7 (123) 456-78-90</div>
    
    <div class="p-adr h-adr">
        <span class="p-street-address">ул. Примерная, д. 123</span>, 
        <span class="p-locality">Москва</span>, 
        <span class="p-postal-code">123456</span>, 
        <span class="p-country-name">Россия</span>
    </div>
    
    <div class="p-note">
        Опытный разработчик с 5-летним стажем работы с веб-технологиями.
    </div>
</div>

2. Микроформат h-event для событий

<div class="h-event">
    <h2 class="p-name">Конференция по веб-разработке 2024</h2>
    
    <div class="p-summary">
        Ежегодная конференция для веб-разработчиков и дизайнеров.
    </div>
    
    <time class="dt-start" datetime="2024-03-15T09:00:00+03:00">
        15 марта 2024, 9:00
    </time>
    
    <time class="dt-end" datetime="2024-03-16T18:00:00+03:00">
        - 16 марта 2024, 18:00
    </time>
    
    <div class="p-location h-card">
        <div class="p-name">Конференц-центр "Стандарт"</div>
        <div class="p-street-address">ул. Центральная, д. 1</div>
        <div>
            <span class="p-locality">Москва</span>, 
            <span class="p-country-name">Россия</span>
        </div>
    </div>
    
    <div class="p-description">
        <p>Присоединяйтесь к ведущим экспертам индустрии для обсуждения последних тенденций в веб-разработке.</p>
        <ul>
            <li>Новые возможности HTML5 и CSS3</li>
            <li>Прогрессивные веб-приложения</li>
            <li>Веб-производительность и оптимизация</li>
        </ul>
    </div>
    
    <div>
        Цена: <span class="p-price">5000</span> руб.
    </div>
    
    <a class="u-url" href="https://example.com/event">Подробнее и регистрация</a>
</div>

3. Микроформат h-review для отзывов

<div class="h-review">
    <div class="p-item h-card">
        <span class="p-name">Ресторан "Вкусно и точка"</span>
        <div class="p-street-address">ул. Гастрономическая, 45</div>
    </div>
    
    <div class="p-rating">4</div>
    <div class="p-best rating">5</div>
    
    <div class="p-reviewer h-card">
        <span class="p-name">Мария Петрова</span>
    </div>
    
    <time class="dt-reviewed" datetime="2024-01-10">10 января 2024</time>
    
    <div class="p-summary">Отличное место для ужина с семьей</div>
    
    <div class="e-description">
        <p>Посетили ресторан вчера вечером. Обслуживание на высшем уровне, персонал внимательный и профессиональный.</p>
        
        <p><strong>Плюсы:</strong></p>
        <ul>
            <li>Вкусная еда, особенно стейки</li>
            <li>Уютная атмосфера</li>
            <li>Быстрое обслуживание</li>
        </ul>
        
        <p><strong>Минусы:</strong></p>
        <ul>
            <li>Цены немного выше среднего</li>
            <li>Шумно в вечернее время</li>
        </ul>
    </div>
</div>

4. Микроформат h-recipe для рецептов

<div class="h-recipe">
    <h2 class="p-name">Домашняя паста карбонара</h2>
    
    <div class="p-author h-card">
        <span class="p-name">Шеф-повар Анна</span>
    </div>
    
    <time class="dt-published" datetime="2024-01-12">12 января 2024</time>
    
    <div class="p-summary">
        Классический итальянский рецепт пасты карбонара с правильным соусом.
    </div>
    
    <div class="p-ingredient">
        <h3>Ингредиенты:</h3>
        <ul>
            <li class="p-ingredient">Спагетти - 400 г</li>
            <li class="p-ingredient">Гуанчиале или панчетта - 150 г</li>
            <li class="p-ingredient">Яичные желтки - 4 шт.</li>
            <li class="p-ingredient">Пекорино романо - 50 г</li>
            <li class="p-ingredient">Черный перец - по вкусу</li>
            <li class="p-ingredient">Соль - по вкусу</li>
        </ul>
    </div>
    
    <div class="e-instructions">
        <h3>Инструкция:</h3>
        <ol>
            <li>Нарежьте гуанчиале небольшими кусочками и обжарьте до хрустящей корочки.</li>
            <li>Взбейте яичные желтки с тертым пекорино и черным перцем.</li>
            <li>Отварите спагетти в подсоленной воде до состояния аль денте.</li>
            <li>Смешайте горячие спагетти с соусом, добавив немного воды от варки.</li>
            <li>Подавайте немедленно, посыпав дополнительным пекорино и перцем.</li>
        </ol>
    </div>
    
    <div class="p-nutrition">
        <h3>Пищевая ценность (на порцию):</h3>
        <ul>
            <li>Калории: <span class="p-calories">650</span> ккал</li>
            <li>Белки: <span class="p-protein">25</span> г</li>
            <li>Углеводы: <span class="p-carbohydrate">75</span> г</li>
            <li>Жиры: <span class="p-fat">25</span> г</li>
        </ul>
    </div>
    
    <div class="p-time">
        <span class="pt-prep">15</span> мин подготовка, 
        <span class="pt-cook">12</span> мин готовка
    </div>
    
    <div class="p-yield">4 порции</div>
    
    <div class="p-category">Основные блюда</div>
    <div class="p-cuisine">Итальянская</div>
</div>