10 советов и приемов по HTML, которые помогут вам
В HTML есть множество полезных элементов и атрибутов, о которых некоторые люди не знают. Ознакомьтесь с этим списком, что бы добиться лучших результатов при работе с HTML.
1) Палитра цветов
Знаете ли вы, что можно создать красивую программу подбора цветов, используя только HTML?
<input type="color" id="color-picker" name="color-picker" value="#e66465"> <label for="color-picker">Выбрать цвет</label>
2) Прогресс бар
С помощью элемента progress можно также создать прогресс-бар, используя только HTML. Его можно использовать для отображения хода выполнения задачи, например, загрузки/выгрузки файла или просмотра видео.
<label for="file">Прогресс файла:</label> <progress id="file" max="100" value="70"> 70% </progress>
3) Тег Meter
Вы можете использовать тег meter для отображения измеренных данных в определенном диапазоне с минимальными/максимальными/низкими/высокими значениями, например, температуры. Попробуйте поиграться со значением атрибута value, увидите как будет меняться отображение.
<label for="fuel">Уровень топлива:</label>
<meter id="fuel"
min="0" max="100"
low="33" high="66" optimum="80"
value="50">
при 50/100
</meter>4) Поиск ввода
Для создания поля ввода с поиском можно установить атрибут type для input на search. Приятным моментом является добавление кнопки "x", которая позволяет пользователю быстро очистить поле.
<label for="site-search">Поиск по сайту:</label> <input type="search" id="site-search" name="q" aria-label="Search through site content"> <button>Поиск</button>
5) Запуск атрибута в упорядоченных списках
Вы можете использовать атрибут start, чтобы указать начальное значение упорядоченного списка.
<ol start="79"> <li>Slowpoke</li> <li>Slowbro</li> <li>Magnemite</li> <li>Magneton</li> </ol>
6) Адаптивные изображения
Используйте тег picture для отображения разных изображений в соответствии с размером окна. Это поможет сделать ваш сайт более гибким, при этом мы поможем пользователю сохранить его трафик.
<picture>
<source media="(min-width:1050px)" srcset="https://assets.pokemon.com/assets/cms2/img/pokedex/full/006.png">
<source media="(min-width:750px)" srcset="https://assets.pokemon.com/assets/cms2/img/pokedex/full/005.png">
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/004.png" alt="Charizard-evolutions" style="width:auto">
</picture>7) Выделение текста
Используйте тег mark для выделения текста. По умолчанию используется желтый цвет, но его можно изменить, установив атрибут background-color на любой другой цвет, который вам нравится.
<p>Привет, друг, это <mark>выделенный текст</mark> с уважением Миша</p>
8) Интерактивный виджет
Вы можете использовать тег details для создания собственного аккордеона, который пользователь может открывать и закрывать.
Уточнение: элемент summary должен быть первым дочерним элементом тега details.
<details> <summary>Нажмите, чтобы открыть </summary> <p>Привет, незнакомец! Я - содержимое, спрятанное внутри этого аккордеона ;)</p> </details>
9) Нативные предложения ввода
Элемент datalist можно использовать для отображения предложений для элемента ввода.
Атрибут list элемента input должен быть равен id элемента datalist.
<label for="fighter">Выбери своего бойца</label>
<input list="fighters" name="fighter">
<datalist id="fighters">
<option value="Sub Zero">
<option value="Cyrax">
<option value="Kano">
<option value="Reptyle">
</datalist>10) Открывать все ссылки в новой вкладке
Вы можете установить атрибут target базового элемента в пустое значение, чтобы при нажатии пользователем на ссылку она всегда открывалась в новой вкладке. Это полезно, если вы хотите избежать непреднамеренного ухода пользователей с определенной страницы.
Однако он включает ссылки на ваш собственный домен. Если вы хотите, чтобы ссылки только на другой домен открывались в новой вкладке, используйте JavaScript.
<head> <base target="_blank"> </head> <div> Все ссылки будут открываться в новой вкладке: <a href="https://learnpine.com/">LearnPine</a> </div>
Источник: https://dev.to/simonpaix/10-html-tips-and-tricks-to-help-you-48m8