// Семантические теги и их роли
const semanticTags = [
  { tag: 'header', role: 'Шапка страницы — логотип и навигация' },
  { tag: 'nav', role: 'Навигационные ссылки' },
  { tag: 'main', role: 'Основное содержимое страницы' },
  { tag: 'section', role: 'Тематический раздел с заголовком' },
  { tag: 'article', role: 'Самостоятельная единица контента' },
  { tag: 'aside', role: 'Боковой контент — сайдбар, реклама' },
  { tag: 'footer', role: 'Подвал — копирайт, контакты' },
  { tag: 'figure', role: 'Картинка с подписью' },
]

console.log('Семантические теги HTML5:')
semanticTags.forEach(item => {
  const el = document.createElement(item.tag)
  console.log('<' + el.tagName.toLowerCase() + '> — ' + item.role)
})

// Строим структуру страницы
const page = document.createElement('div')

const header = document.createElement('header')
const nav = document.createElement('nav')
const main = document.createElement('main')
const aside = document.createElement('aside')
const footer = document.createElement('footer')

header.appendChild(nav)
page.append(header, main, aside, footer)

console.log('Структура страницы:')
Array.from(page.children).forEach(el => {
  console.log('  <' + el.tagName.toLowerCase() + '>')
})

// Создаём figure с figcaption (как в Wikipedia или статье блога)
const figure = document.createElement('figure')

const img = document.createElement('img')
img.src = 'https://example.com/nike-1990.jpg'
img.alt = 'Первая реклама Nike Air Max, 1990 год'
img.width = 600
img.height = 400

const caption = document.createElement('figcaption')
caption.textContent = 'Nike Air Max 90 — модель была представлена в 1990 году и продаётся по сей день'

figure.appendChild(img)
figure.appendChild(caption)

console.log('figure тег:', figure.tagName)
console.log('Изображение:', figure.querySelector('img').alt)
console.log('Подпись:', figure.querySelector('figcaption').textContent)

// article с внутренним footer (автор и дата)
const article = document.createElement('article')
const articleH2 = document.createElement('h2')
articleH2.textContent = 'История Nike Air Max'
const articleP = document.createElement('p')
articleP.textContent = 'Кроссовки с видимой воздушной подушкой изменили индустрию...'
const articleFooter = document.createElement('footer')
articleFooter.textContent = 'Автор: Иван Петров | 01 марта 2024'

article.append(articleH2, articleP, figure, articleFooter)

console.log('article содержит элементов:', article.children.length)