Listagem de alguns recursos do HTML5. Alguns tópicos são links para um quadro que analisa a compatibilidade do recurso e os navegadores mais populares.
A análise de compatibilidade com navegadores é feita através da ferramenta web Can I Use
- Definição de HTML 5
<!DOCTYPE html><html lang="pt-br"><meta charset="utf-8"><meta name="description" content="A perfeiçoando o HTML 5"><meta name="keywords" content="HTML, CSS, PHP"><meta name="author" content="Guilherme Wolner"><meta http-equiv="refresh" content="10">- Texto editável (atributo contenteditable)
<div contenteditable>
<h1>Título</h1>
<p>Corpo do texto que será editável</p>
</div>- Exibir e ocultar informação (details)
<details>
<summary>Clique para exibir detalhes</summary>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</details>- Título da tabela (dentro da tag table)
<caption>Cadastro de Clientes</caption><colgroup>
<col class="nome">
<col class="idade">
<col class="email">
</colgroup><thead>
Para o cabeçalho
</thead><tbody>
Para o corpo da tabela
</tbody><tfoot>
Para o rodapé
</tfoot><td rowspan="2">Mescladno linhas</td><td colspan="3">Mescladno colunas</td>- Atribuindo sub-listas
<ol type="A">
<li>Notebook</li>
<li>Geladeira</li>
<li>TV
<ol>
<li>LED</li>
<li>OLED</li>
<li>LCD</li>
</ol>
</li>
<li>Forno</li>
</ol><fieldset>
<legend>Título da legenda</legend>
<form>
...
</form>
</fieldset>- Barra de nível
<input type="range" name="quantidade"><br>- Definindo uma cor
<input type="color" name="cor"><br><input name="cursos" list="lista-cursos">
<datalist id="lista-cursos">
<option value="HTML 5">
<option value="CSS">
<option value="PHP">
</datalist><br><select name="veiculo">
<optgroup label="Carro">
<option value="ferrari">Ferrari</option>
<option value="lamborghini">Lamborghini</option>
</optgroup>
<optgroup label="Moto">
<option value="pop100" selected>Pop 100</option>
<option value="zig50">Zig-50</option>
</optgroup>
</select><br>- Associando um campo externo a um formulário
<form id="form-cadastro" action="destino.php" method="POST">
Email:<br>
<input type="email" name="email" required autocomplete="on">
<input type="submit" name="btn-cadastrar" value="Cadastrar">
</form>
<input type="text" name="usuario" form="form-cadastro" required><form id="form-cadastro" method="POST">
<input type="email" name="email" required autocomplete="on">
<input type="submit" name="btn-cadastrar" formaction="cadastrar.php" value="Cadastrar">
<input type="submit" name="btn-enviar-email" formaction="enviar-email.php" value="Enviar por email">
</form><form id="form-cadastro">
<input type="email" name="email" required autocomplete="on">
<input type="submit" name="btn-cadastrar" formmethod="GET" formaction="cadastrar.php" value="Cadastrar">
<input type="submit" name="btn-enviar-email" formmethod="POST" formaction="enviar-email.php" value="Enviar por email">
</form><a href="https://pt.lipsum.com/" tabindex="3" target="_blank">Lorem Ipsum</a>
<a href="https://www.google.com/" tabindex="1" target="_blank">Google</a>
<a href="https://fordev.netlify.app/" tabindex="2" target="_blank">For Dev</a>- Definindo tecla de atalho (Accesskey) OBS: A combinação de atalho muda de um navegador para outro. Para mais informações clique aqui.
<a href="https://pt.lipsum.com/" tabindex="3" accesskey="l" target="_blank">Lorem Ipsum</a><br>
<a href="https://www.google.com/" tabindex="1" accesskey="g" target="_blank">Google</a><br>
<a href="https://fordev.netlify.app/" tabindex="2" accesskey="f" target="_blank">For Dev</a><br><object height="450" width="800" data="curso-php.pdf"></object>- Agrupar título (usado apenas para organização interna no código))
<hgroup>
<h1>Título</h1>
<h2>Subtítulo</h2>
</hgroup>- Definindo barra para representar gráfico (valores mínimo, máximo, baixo, alto e ótimo)
<meter min="0" low="3" optimum="6" hight="8" max="10" value="7"><progress max="100" value="30"></progress><br><noscript>Seu navegador não está habilitado para usar Javascript!</noscript><link rel="icon" href="icone_aba.PNG"/>- Adicionar folha de estilo (CSS)
<link rel="stylesheet" href="style.css"/><time datetime="2020-05-05 18:05">05 de Maio de 2020</time>Menu de contexto, barra de ferramentas ou menu pop-up. Sendo que apenas o Firefox tem suporte ao menu de contexto.
<div class="elemento" contextmenu="meu-menu" ></div>
<menu type="context" id="meu-menu">
<menuitem>Atualizar</menuitem>
</menu>- Criando Sub-menu
<div class="elemento" contextmenu="meu-menu" ></div>
<menu type="context" id="meu-menu">
<menu label="Siga-nos">
<menuitem>Facebook</menuitem>
<menuitem>Instagram</menuitem>
</menu>
</menu>- Adicionando ícone
<div class="elemento" contextmenu="meu-menu" ></div>
<menu type="context" id="meu-menu">
<menuitem icon="icones-menu/google.png">Google</menuitem>
<menu label="Siga-nos">
<menuitem icon="icones-menu/facebook.png">Facebook</menuitem>
<menuitem icon="icones-menu/instagram.png">Instagram</menuitem>
</menu>
</menu>- Gerando Keygen (Funciona apenas em versões antigas dos navegadores modernos)
<keygen name="chave">📌 Gráficos vetoriais (SVG)
OBS: Deve-se usar o CSS para visualiza-lo
- Retângulo
svg{
background-color:pink;
}
svg rect{
fill:rgb(0,0,255);
stroke-width:3;
stroke:rgb(0,0,0);
}<svg width="400" height="110">
<rect width="300" height="100" x="50" y="1" />
Desculpe, seu browser não suporta SVG.
</svg>- Retângulo opaco
svg{
background-color:pink;
}
svg rect{
fill:rgb(0,0,255);
stroke-width:3;
stroke:rgb(0,0,0);
}<svg width="400" height="110">
<rect width="300" height="100" x="50" y="1" />
Desculpe, seu browser não suporta SVG.
</svg>- bordas curvadas
.curvado{
fill:blue;
stroke:black;
stroke-width:5;
}<svg width="400" height="180">
<rect class="curvado" x="50" y="20" rx="20" ry="20" width="150" height="150" />
Desculpe, seu browser não suporta SVG.
</svg>Para mais construções com SVG clique aqui.
📌 Imagens mapeadas (Map)
Atribuir mapeamento de uma forma(quadrado, triangulo, circulo) em uma imagem
<img src="universo/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="universo/sun.gif">
<area shape="circle" coords="90,58,3" alt="Mercury" href="universo/mercur.gif">
<area shape="circle" coords="124,58,8" alt="Venus" href="universo/venus.gif">
</map>Para mais mapeamentos usando map clique aqui.