Топ 15 элементов HTML на 2024 год
HTML является знакомым языком для многих разработчиков, многие начинают свой путь именно с него. Однако HTML чаще всего воспринимается как инструмент для создания базовой структуры веб-сайта.
Хотя HTML5 является последней версией языка, в программировании все еще широко используются старые теги и атрибуты. Это создает трудности при поиске оптимальных способов реализации встроенной функциональности, например, аккордеона или полосы прогресса. К тому же, HTML5 представил SEO-дружественные теги, о которых, к сожалению, не знают многие разработчики.
В повседневной работе мы используем лишь 30%-50% доступных HTML-тегов, а остальные остаются незадействованными. В этой статье мы рассмотрим 15 малоизвестных HTML5-тегов с примерами, которые появились в HTML5.
1. Элементы details и summary
Применяются теги <details> и <summary> для создания интерактивных виджетов раскрытия информации.
Применение в реальных проектах может выглядеть, как добавление раздела часто задаваемых вопросов или дополнительной информации.
<details>
<summary>Read more</summary>
<p>This is the additional content that is hidden by default.</p>
</details>Преимущества: Улучшенный пользовательский опыт за счет возможности разворачивания и сворачивания контента.
2.Тег datalist
Элемент <datalist> применяется для предоставления списка предопределенных параметров для элемента <input>.
Пример в реальном проекте: подсказки при вводе текста.
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>Преимущества: Повышенная удобность использования форм за счет функции автозаполнения без JavaScript.
3. Типы и атрибуты input
HTML5 представил новые <input> типы, такие как date, color, range, и number, которые предоставляют собственные элементы управления вводом, адаптированные для определенных типов данных.
<input type="date">
<input type="color">
<input type="range" min="0" max="100">
<input type="number" min="1" max="10">Преимущества: Улучшенный пользовательский интерфейс благодаря встроенной проверке и интуитивно понятным методам ввода.
4. Тег output
Для отображения результатов вычисления или скрипта используют тег <output>.
Приведем пример динамического отображение результатов в формах.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50"> +
<input type="number" id="b" value="50">
<output name="result" for="a b">100</output>
</form>Преимущества: Простой способ динамического отображения результатов, повышающий интерактивность.
5. Тег template
С помощью тега <template> можно определить фрагменты HTML, которые не отображаются сразу при загрузке.
Пример динамической вставки контента в DOM.
<template id="my-template">
<p>TechAlgoSpotlight is Best</p>
</template>
<script>
const template = document.getElementById('my-template');
document.body.appendChild(template.content.cloneNode(true));
</script>Преимущества: Создание повторно используемых фрагментов HTML для динамического контента.
6.Элемент progress
Элемент <progress> отображает ход выполнения задачи, например, загрузки файла или обработки данных.
На примере мы увидим код, в котором проходит загрузка файла или обработка данных.
<progress value="50" max="100">50%</progress>Преимущества: Встроенный, доступный индикатор выполнения без дополнительного JavaScript.
7. Элемент meter
Элемент <meter> представляет собой скалярного измерения в известном диапазоне.
Применяется для оценки или рейтинга.
<meter value="0.6">60%</meter>Преимущества: Доступный способ визуального отображения измерений.
8. Тег mark
Элемент <mark> используется для выделения текста с целью придания ему релевантности или акцента.
Пример кода внедрения результатов поиска или важных терминов.
Here is an important term: <mark>key concept</mark>.Преимущества: Улучшенная читаемость, визуальное выделение важного текста.
9. Элемент abbr
Тег <abbr> предоставляет развернутую форму аббревиатуры или сокращения.
The term <abbr title="HyperText Markup Language">HTML</abbr> is essential for web development.Преимущества: Улучшенная доступность за счет предоставления большего контекста.
10.Тег time
Элемент <time> представляет собой конкретную дату или время в стандартном формате.
<time datetime="2024-08-28">August 28, 2024</time>Преимущества: Улучшенное SEO и лучшее распознавание даты и времени браузерами и поисковыми системами.
11.Элементы figure и figcaption
Элемент <figure> используется для группировки автономного контента, например изображений или диаграмм, с <figcaption> подписями.
<figure>
<img src="example.jpg" alt="An example image">
<figcaption>An example image with a caption.</figcaption>
</figure>Преимущества: Улучшенное семантическое значение и доступность.
12.Элементы section и article
Элемент <section> определяет тематические группы контента, при этом <article> представляет собой самостоятельную часть контента.
<section>
<h2>Section Title</h2>
<p>Content within this section.</p>
</section>
<article>
<h2>Article Title</h2>
<p>Content of the article.</p>
</article>Преимущества: Четкая структура для длинных документов и улучшенное SEO.
13.Тег nav
Тег <nav> определяет разделы страниц, посвященного навигационным ссылкам.
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>Преимущества: Улучшенная доступность за счет выделения разделов навигации для программ чтения с экрана.
14.Тег aside
Тег <aside> используется для предоставления контента, косвенно связанного с основным контентом.
В проектах его используют в виде боковой панели или дополнительной информации
<aside>
<p>Related content or advertisements go here.</p>
</aside>Преимущества: Дополнительная семантическая ценность для вторичного контента, улучшенная доступность.
15.Тег main
Элемент <main> представляет собой основное содержимое страницы, за исключением верхних и нижних колонтитулов и боковых панелей.
<main>
<h1>Welcome to TechAlgoSpotlight</h1>
<p>This is the main content area of the page.</p>
</main>Преимущества: Улучшенное SEO и доступность за счет выделения основного содержания.
Надеемся, что представленная информация оказалась полезной, и вы сможете применить эти команды в своих проектах. Следите за нашими обновлениями, чтобы узнать о новых возможностях и повысить свой уровень программирования!
