[Перевод] HTML трюки07.05.2021 20:18

image

1. Атрибут `loading=lazy`


Совет по производительности. Вы можете использовать атрибут loading = lazy, чтобы отложить загрузку изображения до тех пор, пока пользователь не домотает до них. 
Alternative Text

2. Email, звонки и SMS


  Send us an email



  Call us



  Send us a message

3. Упорядоченные списки с атрибутом `start`


Используйте атрибут start, чтобы изменить начальную точку для ваших упорядоченных списков.

image

4. Элемент`meter`


Вы можете использовать элемент <meter> для отображения количеств. Не требуется JavaScript / CSS.

5. HTML Native Search

6. Элемент Fieldset


Вы можете использовать элемент fieldset, чтобы сгруппировать несколько элементов управления, а также метки (label) в веб-форме.

7. Window.opener


Страницы, открытые с target = "_ blank", позволяют новой странице получить доступ к window.opener оригинала. Это может иметь последствия для безопасности и производительности. Включите rel = "noopener" или rel = "noreferrer", чтобы предотвратить это.

	Marko's website

8. Элемент Base


Если вы хотите открыть все ссылки в документе на новой вкладке, вы можете использовать элемент base

9. Очистка кэша Favicon


Чтобы обновить значок вашего веб-сайта, вы можете заставить браузеры загружать новую версию, добавив ?v=2 к имени файла.

Это особенно полезно в производственной среде, чтобы пользователи получали новую версию.

10. Атрибут `spellcheck`


Используйте атрибут spellcheck, чтобы определить, можно ли проверять элемент на наличие орфографических ошибок.

11. Нативные слайдеры HTML


Вы можете использовать input type = "range" для создания ползунков.

12. HTML Accordion


Вы можете использовать элемент details для создания native HTML accordion

13. Тег `mark`


Вы можете использовать тег mark для выделения текста.
image

14. Атрибут `download`


Вы можете использовать атрибут download в своих ссылках, чтобы загрузить файл вместо перехода к нему.

  Download

15. Трюк для производительности


Используйте формат изображения .webp, чтобы уменьшить размер изображения и повысить производительность вашего веб-сайта.

  
  
  
  
  logo

16. Миниизображение для видео


Используйте атрибут poster, чтобы указать изображение, которое будет отображаться во время загрузки видео или пока пользователь не нажмет кнопку воспроизведения.

Продолжение следует…

© Habrahabr.ru