HTML трюки

HTML Блог

HTML трюки

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: &nbsp;
  <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"> 
Вернуться наверх