Email, звонки и SMS
<a href="mailto:{email}?subject={subject}&body={content}">
Send us an email
</a>
<a href="tel:{phone}">
Call us
</a>
<a href="sms:{phone}?body={content}">
Send us a message
</a>
Упорядоченные списки с атрибутом `start`
Используйте атрибут start
, чтобы изменить начальную точку для ваших упорядоченных списков.

Элемент`meter`
Вы можете использовать элемент <meter>
для отображения количеств. Не требуется JavaScript / CSS.
HTML:
<label for="value1">Low</label>
<meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter>
<label for="value2">Medium</label>
<meter id="value2" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter>
<label for="value3">High</label>
<meter id="value3" min="0" max="100" low="30" high="75" optimum="80" value="80"></meter>
CSS:
body {
padding: 40px 20px;
}
label {
display: block;
margin-top: 15px;
}
meter {
width: 300px;
height: 20px;
}
HTML Native Search
HTML:
<div class="wrapper">
<h1>
Native HTML Search
</h1>
<input list="items">
<datalist id="items">
<option value="Marko Denic">
<option value="FreeCodeCamp">
<option value="FreeCodeTools">
<option value="Web Development">
<option value="Web Developer">
</datalist>
</div>
CSS:
.wrapper {
padding-top: 30px;
text-align: center;
h1 {
font-weight: normal;
}
input {
padding: 10px;
font-size: 1.2em;
}
}
Элемент Fieldset
Вы можете использовать элемент fieldset
, чтобы сгруппировать несколько элементов управления, а также метки ( label
) в веб-форме.
HTML:
<form>
<fieldset>
<legend>Choose your favorite language</legend>
<input type="radio" id="javascript" name="language">
<label for="javascript">JavaScript</label><br/>
<input type="radio" id="python" name="language">
<label for="python">Python</label><br/>
<input type="radio" id="java" name="language">
<label for="java">Java</label>
</fieldset>
</form>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&display=swap');
form {
font-family: 'Roboto Mono', monospace;
}
Window.opener
Страницы, открытые с target = "_ blank"
, позволяют новой странице получить доступ к window.opener оригинала. Это может иметь последствия для безопасности и производительности. Включите rel = "noopener"
или rel = "noreferrer"
, чтобы предотвратить это.
<a href="https://markodenic.com/" target="_blank" rel="noopener">
Marko's website
</a>
Элемент Base
Если вы хотите открыть все ссылки в документе на новой вкладке, вы можете использовать элемент base
HTML:
<head>
<base target="_blank">
</head>
<!-- This link will open in a new tab. -->
<div class="wrapper">
This link will be opened in a new tab:
<a href="https://freecodetools.org/">
Free Code Tools
</a>
<p>
Read more: <br><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base">
MDN Documentation
</a>
</p>
</div>
Очистка кэша Favicon
Чтобы обновить значок вашего веб-сайта, вы можете заставить браузеры загружать новую версию, добавив ?v=2
к имени файла.
Это особенно полезно в производственной среде, чтобы пользователи получали новую версию.
<link rel="icon" href="/favicon.ico?v=2" />
Атрибут `spellcheck`
Используйте атрибут spellcheck
, чтобы определить, можно ли проверять элемент на наличие орфографических ошибок.
HTML:
<label for="input1">spellcheck="true"</label>
<input type="text" id="input1" spellcheck="true">
<label for="input2">spellcheck="false"</label>
<input type="text" id="input2" spellcheck="false">
Нативные слайдеры HTML
Вы можете использовать input type = "range"
для создания ползунков.
HTML:
<label for="volume">Volume: </label>
<input type="range" id="volume" name="volume" min="0" max="20">
<label for="result">Your choice: </label>
<input type="number" id="result" name="result">
CSS:
body {
padding: 50px 20px;
}
label {
display: block;
}
input[type=range] {
background: red;
width: 200px;
margin-bottom: 20px;
}
JS:
const volume = document.getElementById('volume');
const result = document.getElementById('result');
result.value = volume.value;
volume.addEventListener('change', () => {
result.value = volume.value;
});
HTML Accordion
Вы можете использовать элемент details
для создания native HTML accordion
HTML:
<div class="wrapper">
<details>
<summary>
Click me to see more details
</summary>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis.
</p>
</details>
</div>
Тег `mark`
Вы можете использовать тег mark
для выделения текста.

Атрибут `download`
Вы можете использовать атрибут download
в своих ссылках, чтобы загрузить файл вместо перехода к нему.
<a href='path/to/file' download>
Download
</a>
Миниизображение для видео
Используйте атрибут poster
, чтобы указать изображение, которое будет отображаться во время загрузки видео или пока пользователь не нажмет кнопку воспроизведения.
<video poster="path/to/image">