<!-- <a> всередині <p> (flow content) → може містити фразований вміст -->
<p>Відвідайте <a href="https://example.com">наш сайт</a>.</p>

<!-- <a> всередині <ul> (list context) → НЕ може містити <li> -->
<!-- ❌ Це неправильно: -->
<a href="/"><li>Головна</li></a>

<!-- ✅ Правильно: -->
<li><a href="/">Головна</a></li>

<!-- ❌ Небезпечно: нова вкладка має доступ window.opener -->
<a href="https://external-site.com" target="_blank">Сторонній сайт</a>

<!-- ✅ Безпечно: window.opener = null -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer"> Сторонній сайт </a>

<a href="https://www.w3.org/TR/html52/" title="HTML 5.2 — специфікація W3C"> Специфікація HTML5 </a>
<!-- При наведенні курсора браузер показує підказку з title -->

<!-- alt зображення = текст посилання -->
<a href="/home">
    <img src="logo.svg" alt="Головна сторінка компанії Acme" />
</a>

<!-- ❌ Порожній alt = посилання без тексту для скринрідера -->
<a href="/home">
    <img src="logo.svg" alt="" />
</a>

<!-- src і alt є обов'язковими за специфікацією -->
<img src="photo.jpg" alt="Опис зображення" />

<!-- ✅ Браузер резервує місце для зображення до його завантаження -->
<img src="product-photo.jpg" alt="Навушники Sony WH-1000XM5 у чорному кольорі" width="800" height="600" />

<!-- ❌ Без розмірів: сторінка «стрибає» при завантаженні -->
<img src="product-photo.jpg" alt="Навушники Sony" />

<!-- eager (за замовчуванням): завантажити негайно -->
<img src="hero.jpg" alt="Герой-банер" loading="eager" />

<!-- lazy: відкласти завантаження до наближення до viewport -->
<img src="below-fold-photo.jpg" alt="Фото нижче відгину" loading="lazy" />

<!-- async: декодувати асинхронно (не блокувати рендеринг) -->
<img src="large-photo.jpg" alt="Велике фото" decoding="async" />

<!-- sync: декодувати синхронно (рідко потрібно) -->
<img src="critical-chart.png" alt="Критичний графік" decoding="sync" />

<!-- auto: браузер вирішує (за замовчуванням) -->
<img src="photo.jpg" alt="Фото" decoding="auto" />

<picture>
    <!-- Мобільний: квадратний кадр, обличчя крупним планом -->
    <source media="(max-width: 767px)" srcset="/images/speaker-portrait-mobile.jpg" />
    <!-- Планшет: середній план -->
    <source media="(max-width: 1199px)" srcset="/images/speaker-portrait-tablet.jpg" />
    <!-- Десктоп: широкий план з фоном -->
    <img
        src="/images/speaker-portrait-desktop.jpg"
        alt="Олена Мороз, доповідач конференції WebUA 2024"
        width="1200"
        height="630"
    />
</picture>

<picture>
    <!-- AVIF — найкраще стиснення, нова підтримка -->
    <source srcset="/images/hero.avif" type="image/avif" />
    <!-- WebP — відмінне стиснення, широка підтримка -->
    <source srcset="/images/hero.webp" type="image/webp" />
    <!-- JPEG — універсальний fallback -->
    <img
        src="/images/hero.jpg"
        alt="Панорама Києва зі Схилів"
        width="1920"
        height="1080"
        loading="eager"
        decoding="async"
    />
</picture>

<!-- 1. Дескриптор щільності (x) — для фіксованих розмірів -->
<img
    src="/images/logo-1x.png"
    srcset="/images/logo-2x.png 2x, /images/logo-3x.png 3x"
    alt="Логотип"
    width="200"
    height="60"
/>

<!-- 2. Дескриптор ширини (w) + sizes — для адаптивних зображень -->
<img
    src="/images/photo-800.jpg"
    srcset="
        /images/photo-400.jpg   400w,
        /images/photo-800.jpg   800w,
        /images/photo-1200.jpg 1200w,
        /images/photo-1600.jpg 1600w
    "
    sizes="
    (max-width: 600px) 100vw,
    (max-width: 1200px) 50vw,
    800px
  "
    alt="Краєвид Карпат у осінніх фарбах"
    width="1600"
    height="900"
    loading="lazy"
/>

sizes="
  (max-width: 600px) 100vw,   ← якщо вікно ≤600px: зображення займає 100% ширини
  (max-width: 1200px) 50vw,   ← якщо вікно ≤1200px: зображення займає 50% ширини
  800px                        ← в іншому разі: фіксована ширина 800px
"

<!-- Зображення з підписом -->
<figure>
    <img
        src="/images/neural-network-diagram.png"
        alt="Схема нейронної мережі з трьома прихованими шарами"
        width="800"
        height="500"
    />
    <figcaption>
        Рис. 1. Архітектура тришарової нейронної мережі для класифікації зображень.
        <cite>Джерело: Deep Learning Book, Goodfellow et al., 2016</cite>
    </figcaption>
</figure>

<!-- Блок коду як figure -->
<figure>
    <figcaption>Лістинг 1: Функція обчислення факторіалу</figcaption>
    <pre><code>
function factorial(n) {
    if (n === 0) return 1;
    return n * factorial(n - 1);
}
  </code></pre>
</figure>

<!-- Цитата як figure -->
<figure>
    <blockquote>
        <p>Будь-який досить просунутий код невідрізнений від магії.</p>
    </blockquote>
    <figcaption>— Артур Кларк (перефраз)</figcaption>
</figure>

<!-- Атрибут usemap пов'язує <img> з <map> через # + name -->
<img src="/images/ukraine-map.png" alt="Карта регіонів України" width="800" height="600" usemap="#ukraine-regions" />

<map name="ukraine-regions">
    <!-- shape="rect": прямокутна зона: x1,y1,x2,y2 -->
    <area shape="rect" coords="120,80,280,180" href="/regions/kyiv" alt="Київська область" />

    <!-- shape="circle": кругла зона: cx,cy,radius -->
    <area shape="circle" coords="350,300,50" href="/regions/poltava" alt="Полтавська область" />

    <!-- shape="poly": довільний многокутник: x1,y1,x2,y2,...,xN,yN -->
    <area
        shape="poly"
        coords="200,100,300,120,320,200,220,210,180,150"
        href="/regions/cherkasy"
        alt="Черкаська область"
    />

    <!-- shape="default": решта зображення -->
    <area shape="default" href="/regions" alt="Всі регіони України" />
</map>

<!DOCTYPE html>
<html lang="uk">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta
            name="description"
            content="Портфоліо Андрія Лисенка — документальна фотографія з України. Репортажі, портрети, природа."
        />
        <title>Андрій Лисенко — Документальна фотографія</title>
        <link rel="canonical" href="https://lysenko.photo/" />
        <!-- Іконка сайту -->
        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    </head>
    <body>
        <!-- ===== ШАПКА ===== -->
        <header>
            <!-- Логотип — посилання на головну -->
            <a href="/">
                <img
                    src="/images/logo.svg"
                    alt="Повернутися на головну — портфоліо Андрія Лисенка"
                    width="180"
                    height="60"
                />
            </a>

            <!-- Навігація -->
            <nav aria-label="Головне меню">
                <ul>
                    <li><a href="/" aria-current="page">Головна</a></li>
                    <li><a href="/portfolio">Портфоліо</a></li>
                    <li><a href="/about">Про мене</a></li>
                    <li><a href="/workshops">Workshops</a></li>
                    <li>
                        <a
                            href="https://instagram.com/lysenko.photo"
                            target="_blank"
                            rel="noopener noreferrer external"
                            title="Переглянути профіль у Instagram (відкриється в новій вкладці)"
                        >
                            Instagram ↗
                        </a>
                    </li>
                    <li><a href="#contacts">Контакти</a></li>
                </ul>
            </nav>
        </header>

        <!-- ===== ГОЛОВНИЙ БАННЕР ===== -->
        <main>
            <section aria-label="Заголовок портфоліо">
                <!-- Hero-зображення: адаптивне, пріоритетне -->
                <picture>
                    <source srcset="/images/hero-mobile.avif" type="image/avif" media="(max-width: 767px)" />
                    <source srcset="/images/hero-mobile.webp" type="image/webp" media="(max-width: 767px)" />
                    <source srcset="/images/hero-desktop.avif" type="image/avif" />
                    <source srcset="/images/hero-desktop.webp" type="image/webp" />
                    <img
                        src="/images/hero-desktop.jpg"
                        alt="Чоловік фотографує сонце, що сідає над Карпатами. Силует на тлі помаранчевого неба."
                        width="1920"
                        height="900"
                        loading="eager"
                        fetchpriority="high"
                        decoding="async"
                    />
                </picture>

                <h1>Документальна фотографія — правда без прикрас</h1>
                <p>Знімаю людей, місця і події такими, якими вони є.</p>

                <a href="/portfolio" rel="next"> Переглянути портфоліо → </a>
            </section>

            <!-- ===== ГАЛЕРЕЯ ПРОЄКТІВ ===== -->
            <section aria-labelledby="projects-heading">
                <h2 id="projects-heading">Вибрані проєкти</h2>

                <ul>
                    <li>
                        <!-- Посилання з зображенням та текстом -->
                        <a href="/portfolio/carpathians-2024">
                            <figure>
                                <picture>
                                    <source srcset="/images/project-carpathians.webp" type="image/webp" />
                                    <img
                                        src="/images/project-carpathians.jpg"
                                        alt="Вершина Говерли в хмарах. Туристи на гірській стежці."
                                        width="600"
                                        height="400"
                                        loading="lazy"
                                        decoding="async"
                                        srcset="
                                            /images/project-carpathians-400.jpg   400w,
                                            /images/project-carpathians-600.jpg   600w,
                                            /images/project-carpathians-1200.jpg 1200w
                                        "
                                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 400px"
                                    />
                                </picture>
                                <figcaption>
                                    <h3>Карпати 2024</h3>
                                    <p>30 днів. 4 гірські хребти. 1200+ знімків.</p>
                                </figcaption>
                            </figure>
                        </a>
                    </li>

                    <li>
                        <a href="/portfolio/kyiv-streets">
                            <figure>
                                <picture>
                                    <source srcset="/images/project-kyiv.webp" type="image/webp" />
                                    <img
                                        src="/images/project-kyiv.jpg"
                                        alt="Людина з парасолькою на мокрому Хрещатику вночі. Відображення ліхтарів у калюжах."
                                        width="600"
                                        height="400"
                                        loading="lazy"
                                        decoding="async"
                                    />
                                </picture>
                                <figcaption>
                                    <h3>Вулиці Києва</h3>
                                    <p>Street photography. Місто, яке ніколи не спить.</p>
                                </figcaption>
                            </figure>
                        </a>
                    </li>

                    <li>
                        <a href="/portfolio/people-of-donbas">
                            <figure>
                                <!-- Декоративний оверлей — alt порожній -->
                                <img src="/images/project-overlay.svg" alt="" width="600" height="400" />
                                <img
                                    src="/images/project-donbas.jpg"
                                    alt="Літня жінка стоїть на порозі зруйнованого будинку. Вона тримає старе фото."
                                    width="600"
                                    height="400"
                                    loading="lazy"
                                    decoding="async"
                                />
                                <figcaption>
                                    <h3>Люди Донбасу</h3>
                                    <p>Документальний проєкт 2022–2023.</p>
                                </figcaption>
                            </figure>
                        </a>
                    </li>
                </ul>
            </section>

            <!-- ===== ЗАВАНТАЖЕННЯ ===== -->
            <section aria-labelledby="downloads-heading">
                <h2 id="downloads-heading">Матеріали для завантаження</h2>

                <ul>
                    <li>
                        <a
                            href="/files/lysenko-portfolio-2024.pdf"
                            download="Lysenko-Portfolio-2024.pdf"
                            type="application/pdf"
                        >
                            📄 Портфоліо PDF (8.2 МБ)
                        </a>
                    </li>
                    <li>
                        <a href="/files/media-kit.zip" download="lysenko-media-kit.zip" type="application/zip">
                            📦 Media Kit для видань (ZIP, 45 МБ)
                        </a>
                    </li>
                    <li>
                        <!-- Якірне посилання на розділ нижче -->
                        <a href="#pricing">💰 Переглянути прайс-лист</a>
                    </li>
                </ul>
            </section>

            <!-- ===== ПУБЛІКАЦІЇ — посилання з rel="author" ===== -->
            <section aria-labelledby="press-heading">
                <h2 id="press-heading">Публікації</h2>
                <ul>
                    <li>
                        <a
                            href="https://nytimes.com/article/ukraine-documentary"
                            target="_blank"
                            rel="noopener noreferrer external"
                        >
                            The New York Times: «Ukraine Through the Lens»
                            <img src="/images/icon-external.svg" alt="(зовнішнє посилання)" width="12" height="12" />
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://nationalgeographic.com/lysenko-carpathians"
                            target="_blank"
                            rel="noopener noreferrer external"
                        >
                            National Geographic: Carpathian Series
                            <img src="/images/icon-external.svg" alt="(зовнішнє посилання)" width="12" height="12" />
                        </a>
                    </li>
                </ul>
            </section>

            <!-- ===== ПРАЙС — якір ===== -->
            <section id="pricing" aria-labelledby="pricing-heading">
                <h2 id="pricing-heading">Прайс-лист</h2>
                <!-- ... вміст ... -->
            </section>
        </main>

        <!-- ===== КОНТАКТИ ===== -->
        <section id="contacts" aria-labelledby="contacts-heading">
            <h2 id="contacts-heading">Контакти</h2>

            <address>
                <p>
                    Email:
                    <a href="mailto:andrii@lysenko.photo?subject=Запит%20на%20зйомку"> andrii@lysenko.photo </a>
                </p>
                <p>
                    Телефон:
                    <a href="tel:+380671234567">+38 (067) 123-45-67</a>
                </p>
                <p>
                    WhatsApp / Telegram:
                    <a href="https://t.me/lysenko_photo" target="_blank" rel="noopener noreferrer external">
                        @lysenko_photo
                    </a>
                </p>
            </address>

            <!-- Схема студії: image map -->
            <h3>Де знайти студію</h3>
            <img
                src="/images/studio-floor-plan.png"
                alt="Схема першого поверху: студія — кімната 102, ліворуч від входу"
                width="600"
                height="400"
                usemap="#studio-map"
            />
            <map name="studio-map">
                <area
                    shape="rect"
                    coords="80,120,220,200"
                    href="/contacts#studio-info"
                    alt="Студія №102 — Андрій Лисенко"
                />
                <area
                    shape="rect"
                    coords="250,80,380,160"
                    href="/contacts#reception"
                    alt="Ресепшн — запис та адміністрація"
                />
            </map>
        </section>

        <!-- ===== ПІДВАЛ ===== -->
        <footer>
            <p>
                <small>
                    &copy; 2024 Андрій Лисенко.
                    <a href="/license" rel="license"> CC BY-NC 4.0 </a> — некомерційне використання з зазначенням
                    автора.
                </small>
            </p>
            <nav aria-label="Посилання підвалу">
                <a href="/privacy">Політика конфіденційності</a>
                <a href="/sitemap.xml" type="application/xml">Карта сайту</a>
            </nav>
        </footer>
    </body>
</html>