HTML теги, которые пришлось использовать

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

Теги с нетривиальной семантикой

1. Тег <picture> для адаптивных изображений

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

<!-- Раньше я просто использовал img с media queries в CSS -->
<!-- Но потом узнал про элемент picture -->

<picture>
  <source media="(max-width: 600px)" srcset="mobile.jpg">
  <source media="(max-width: 1200px)" srcset="tablet.jpg">
  <img src="desktop.jpg" alt="Описание изображения">
</picture>

Это позволяет браузеру выбирать правильное изображение на уровне HTML, что эффективнее, чем CSS media queries.

2. Тег <details> и <summary> для аккордеонов

Очень полезны для создания раскрывающихся блоков без JavaScript:

<details>
  <summary>Часто задаваемые вопросы</summary>
  
  <p>Вот подробный ответ на вопрос. Этот контент скрыт по умолчанию.</p>
  <p>Можно добавить и стили и JavaScript для обработки событий.</p>
</details>

<style>
details summary {
  cursor: pointer;
  font-weight: bold;
}

details[open] summary {
  color: blue;
}
</style>

<script>
const details = document.querySelector('details');
details.addEventListener('toggle', (event) => {
  if (event.newState === 'open') {
    console.log('Открыли');
  }
});
</script>

3. Тег <dialog> для модальных окон

Вместо создания модальных окон с div и позиционированием:

<button onclick="dialog.showModal()">Открыть диалог</button>

<dialog id="dialog">
  <h2>Подтверждение</h2>
  <p>Вы уверены?</p>
  
  <button onclick="dialog.close('yes')">Да</button>
  <button onclick="dialog.close('no')">Нет</button>
</dialog>

<style>
dialog {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
</style>

<script>
const dialog = document.getElementById('dialog');

dialog.addEventListener('close', () => {
  console.log('Результат:', dialog.returnValue);
});
</script>

4. Тег <meter> для отображения измерений

Для визуализации значений вроде громкости или прогресса:

<!-- Уровень сигнала -->
<meter value="6" min="0" max="10"></meter>

<!-- Оценка продукта -->
<meter value="8" min="0" max="10" 
        low="3" high="7" optimum="8"></meter>

<!-- Температура процессора -->
<meter value="65" min="0" max="100" 
        low="30" high="80" optimum="50"></meter>

<style>
meter {
  width: 200px;
  height: 20px;
}
</style>

5. Тег <progress> для прогресс-бара

Я долгое время использовал div с CSS для прогресса, но потом узнал про встроенный тег:

<progress value="70" max="100"></progress>

<style>
progress {
  width: 100%;
  height: 20px;
  border-radius: 10px;
}

progress::-webkit-progress-bar {
  background-color: #f3f3f3;
}

progress::-webkit-progress-value {
  background-color: #4caf50;
}

progress::-moz-progress-bar {
  background-color: #4caf50;
}
</style>

<script>
const progress = document.querySelector('progress');
let value = 0;

const interval = setInterval(() => {
  value += Math.random() * 10;
  progress.value = Math.min(value, 100);
  
  if (value >= 100) {
    clearInterval(interval);
  }
}, 500);
</script>

6. Тег <datalist> для списков предложений

Олень полезен для автодополнения без сложной логики:

<input type="text" placeholder="Выберите язык" list="languages">

<datalist id="languages">
  <option value="JavaScript"></option>
  <option value="Python"></option>
  <option value="Java"></option>
  <option value="C++"></option>
  <option value="Go"></option>
</datalist>

7. Тег <fieldset> для группировки форм

Оказался очень полезен для структуры сложных форм:

<form>
  <fieldset>
    <legend>Личная информация</legend>
    
    <label>
      Имя: <input type="text" name="name" required>
    </label>
    
    <label>
      Email: <input type="email" name="email" required>
    </label>
  </fieldset>
  
  <fieldset>
    <legend>Адрес</legend>
    
    <label>
      Город: <input type="text" name="city">
    </label>
    
    <label>
      Страна: <input type="text" name="country">
    </label>
  </fieldset>
  
  <button type="submit">Отправить</button>
</form>

<style>
fieldset {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

legend {
  font-weight: bold;
  color: #333;
}
</style>

8. Тег <output> для результатов вычислений

Интересный тег, который я не знал о существовании:

<form>
  <input type="range" id="slider" min="0" max="100" value="50">
  
  <p>Значение: <output id="result" for="slider">50</output></p>
</form>

<script>
const slider = document.getElementById('slider');
const result = document.getElementById('result');

slider.addEventListener('input', (e) => {
  result.textContent = e.target.value;
});
</script>

Теги, которые я неправильно понимал

9. Тег <section> vs <article> vs <div>

Долго путался в разнице. <article> — это независимый контент (статья в блоге), <section> — логическая часть страницы:

<article>
  <h1>Моя первая статья</h1>
  
  <section>
    <h2>Введение</h2>
    <p>Вводная часть...</p>
  </section>
  
  <section>
    <h2>Основная часть</h2>
    <p>Основной контент...</p>
  </section>
  
  <section>
    <h2>Заключение</h2>
    <p>Выводы...</p>
  </section>
</article>

10. Тег <time> для дат и времени

Очень полезен для SEO и для машинного парсинга:

<!-- Просто визуальное отображение -->
<p>Статья опубликована <time>25 декабря 2023</time></p>

<!-- С атрибутом datetime для машинного парсинга -->
<p>Событие: <time datetime="2024-12-25T19:00">25 декабря в 19:00</time></p>

<!-- С часовым поясом -->
<time datetime="2024-12-25T19:00:00+03:00">25 декабря, 19:00 МСК</time>

Причины, почему я их не знал

1. Отсутствие в популярных курсах — часто базовые курсы HTML учат только основным тегам
2. Недавние добавления в стандарт — <dialog>, <details> появились относительно недавно
3. Специфичность — некоторые теги имеют узкое применение
4. Брауза поддержка — раньше многие из них плохо поддерживались

Процесс обучения

Когда столкнулся с этими тегами:

1. Читал документацию MDN — лучший источник информации
2. Экспериментировал в CodePen — быстро проверял поведение
3. Смотрел примеры — как другие разработчики их используют
4. Применял в проектах — практика — лучший учитель

Итог

Это показывает, что:

• Web-разработка — очень обширная область
• Даже опытные разработчики постоянно учат новое
• Важно быть в курсе стандартов и новых возможностей
• Документация и экспериментирование — ключи к успеху
• Не стыдно не знать что-то, стыдно не учиться