Полезные html трюки

1. Сегодня на рассмотрении 5 относительно новых фишек! К примеру у нас есть условная картинка, обычная. Но что делать, если нужно базовый URL. Подобное метатэг встречался в ModX. Пишется базовый URL, и к нему присоединяется этот src. Тем самым если мы сохраним, то картинка пропадёт. 

<base href="http://example.com" target="_blank" />

2. Далее у нас идёт переадресация с помощью html. Пишем meta, Refresh, Content 4-это 4 секунды, через которые будет переадресация. 

<meta http-equiv="refresh" content="3; https://example.com" />

3. Следующий момент tag picture. Мы можем прописывать медиазапросы. К примеру-изменение размера картинки. Картинку можно изменить с помощью "Large", "Medium" и "Small". Если ни под один из размеров не подходит, то в таком случае мы делаем через image

<picture>
 <source media="(max-width:768px)" srcset="/img/medium.jpg" />
 <source media="(max-width:495px)" srcset="/img/small.jpg" />
 <img src="/img/large.jpg" alt="" />
</picture>

4. Одним из трюков является подсказка. Это может пригодиться тогда-когда нужно помочь найти свой город, или свою страну. Это обычно встроено в html.

<datalist id="cities">
 <option value="Moscow"></option>
 <option value="New York"></option>
 <option value="Tokyo"></option>
</datalist>

5. Lazy loading. Сайт будет грузиться быстрее, если мы будем делать ленивую загрузку.

<img 
 src="/img/medium.jpg"
 alt=""
 loading="lazy"
/>

Источник: https://htmllessons.ru/blog/front-end/5-html-tryukov-o-kotoryh-ty-ne-znal