8 novidades do HTML 5 que você NÃO CONHECE

Você já ouviu falar do State of HTML ?

É uma pesquisa anual que mostra o uso e conhecimento de características do HTML pela comunidade.

É possível participar e ver os resultados da pesquisa. Nesse momento, você poderá encontrar features HTML que você nem sabia que existiam.

Aqui vão 5 delas.

<div id="my-pop" popover> 
  like 👍🏾 
</div>

<button popovertarget="my-pop" popovertargetaction="show">
  Show
</button>

<button popovertarget="my-pop" popovertargetaction="hide">
  Hide
</button>

https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

https://caniuse.com/mdn-html_global_attributes_popover

2. Dialog

<button id="openModal">Open</button>
<dialog id="dialog">
  <h1>Let's code!</h1>
	<form method="dialog">
		<button>Ok!</button>
	</form>

</dialog>

<script>
	openModal.onclick = () => {
    dialog.showModal();
  }
</script>

<style>
  ::backdrop {
    background: rgb(0 0 0 / 0.7)
  }
</style>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

https://caniuse.com/dialog

3. Datalist

<label for="list">O melhor 🏆</label>
<input id="list" list="my-list" type="text">
<datalist id="my-list">
  <option value="Astro 🚀"></option>
  <option value="React 🤮"></option>
  <option value="Vue ✨"></option>
</datalist>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

https://caniuse.com/datalist

4. Details

<details open name="panel">
	<summary>Main info</summary>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit quas reiciendis amet est debitis nobis natus, error nostrum perferendis modi, placeat officiis. Culpa deleniti cupiditate nobis, quaerat a distinctio ad.
</details>
<details name="panel">
	<summary>Style</summary>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ullam sint adipisci consectetur vel dolorum libero optio voluptatibus omnis quidem! Maxime rem tempora atque explicabo saepe minima omnis sequi fugit!
</details>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

https://caniuse.com/details

5. Custom elements

<!-- crie qualquer elemento dando nome 
com no mínimo 2 palavras. O elemento será entendido 
como display:inline -->
<mb-pop>Love it! 💜</mb-pop>

<!-- se quiser fazer via JS -->
<script>
	class MyCustomElement extends HTMLElement {
	  constructor(){
		  super();
	  }
	}
	
	customElements.define("mb-pop", MyCustomElement)

</script>

https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define

6. Media capture

<!-- irá abrir a câmera -->
<input type="file" capture>

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture

https://caniuse.com/html-media-capture

7. Content Editable

<h2 class="title" contenteditable="plaintext-only">
  Plain text
</h2>

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

8. Fetch Priority

<img src="https://github.com/maykbrito.png"
  width="200" 
  height="200"
  loading="lazy"
  fetchpriority="high" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority

https://caniuse.com/mdn-html_elements_script_fetchpriority

1. Popover