Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Tipos de TAG's em HTML
Compartilhar
Prévia do material em texto
Tipos de TAG’s
Tag
Descrição
<!--...-->
Define um comentário
<!DOCTYPE>
Define o tipo de documento
<a>
Define um hiperlink
<abbr>
Define uma abreviação ou um acrônimo
<address>
Define informações de contato para o autor ou proprietário de um documento
<area>
Define uma área dentro de um mapa de imagem
<article>
Define um artigo
<aside>
Define o conteúdo, além do conteúdo da página
<audio>
Define o conteúdo de som
<b>
Define o texto em negrito
<base>
Especifica o destino base para todos os URLs relativos
<bdi>
Isola uma parte do texto que pode ser formatado em uma direção diferente de outro texto fora dele
<bdo>
Substitui a direção do texto atual
<blockquote>
Define uma seção que é citada de outra fonte
<body>
Define o corpo do documento
<br>
Define uma quebra de linha única
<button>
Define um botão clicável
<canvas>
Usado para desenhar gráficos via script
<caption>
Define uma legenda de tabela
<cite>
Define o título de uma obra
<code>
Define um pedaço de código de computador
<col>
Especifica as propriedades da coluna para cada coluna dentro de um elemento <colgroup>
<colgroup>
Especifica um grupo de uma ou mais colunas em uma tabela para formatação
<data>
Vincula o conteúdo fornecido a uma tradução legível por máquina
<datalist>
Especifica uma lista de opções predefinidas para controles de entrada
<dd>
Define uma descrição / valor de um termo em uma lista de descrição
<del>
Define o texto que foi excluído de um documento
<details>
Define detalhes adicionais que o usuário pode visualizar ou ocultar
<dfn>
Representa a instância de definição de um termo
<dialog>
Define uma caixa de diálogo ou janela
<div>
Define uma seção em um documento
<dl>
Define uma lista de descrição
<dt>
Define um termo / nome em uma lista de descrição
<em>
Define texto enfatizado
<embed>
Define um contêiner para um aplicativo externo
<fieldset>
Agrupa elementos relacionados em um formulário
<figcaption>
Define uma legenda para um elemento tipo <figure>
<figure>
Especifica conteúdo auto-contido
<footer>
Define um rodapé para um documento ou seção
<form>
Define um formulário HTML para entrada do usuário
<h1> até <h6>
Define cabeçalhos de HTML
<head>
Define informações sobre o documento
<header>
Define um cabeçalho para um documento ou seção
<hr>
Marca uma quebra de tema com uma linha horizontal
<html>
Define a raiz de um documento HTML
<i>
Define uma parte do texto em uma voz ou humor alternativo
<iframe>
Define um quadro inline
<img>
Define uma imagem
<input>
Define um controle de entrada
<ins>
Define um texto que foi inserido em um documento
<kbd>
Define a entrada do teclado
<label>
Define um rótulo para o elemnto <input>
<legend>
Define uma legenda para um elemento <fieldset>
<li>
Define um item da lista
<link>
Define o relacionamento entre um documento e um recurso externo com um arquivo css
<main>
Especifica o conteúdo principal de um documento
<map>
Define um mapa de imagem do lado do cliente
<mark>
Define texto marcado / realçado
<meta>
Define metadados sobre um documento HTML
<meter>
Define uma medida escalar dentro de um intervalo
<nav>
Define links de navegação
<noscript>
Define um conteúdo alternativo quando o navegador não suporta scripts
<object>
Define um objeto incorporado
<ol>
Define uma lista ordenada
<optgroup>
Define um grupo de opções relacionadas em uma lista suspensa
<option>
Define uma opção em uma lista suspensa
<output>
Define o resultado de um cálculo
<p>
Define um parágrafo
<param>
Define um parâmetro para um objeto
<picture>
Define um contêiner para vários recursos de imagem
<pre>
Define o texto pré-formatado
<progress>
Representa o progresso de uma tarefa
<q>
Define uma cotação curta
<rp>
Define o que mostrar em navegadores que não suportam anotações em ruby
<rt>
Define uma explicação / pronúncia de caracteres
<ruby>
Define uma anotação rubi
<s>
Define o texto que não está mais correto
<samp>
Define a saída de amostra de um programa de computador
<script>
Define um script do lado do cliente
<section>
Define uma seção em um documento
<select>
Define uma lista suspensa
<small>
Define texto menor
<source>
Define vários recursos de mídia para elementos <video> e <audio>
<span>
Define uma seção em um documento
<strong>
Define um texto em negrito
<style>
Define informações de estilo para um documento
<sub>
Define o texto subscrito
<summary>
Define um cabeçalho visível para um elemento <details>
<sup>
Define o texto sobrescrito
<svg>
Define um contêiner para gráficos SVG
<table>
Define uma tabela
<tbody>
Agrupa o conteúdo do corpo em uma tabela
<td>
Define uma célula em uma tabela
<template>
Define um modelo
<textarea>
Define um controle de entrada de múltiplas linhas (área de texto)
<tfoot>
Agrupa o conteúdo do rodapé em uma tabela
<th>
Define uma célula de cabeçalho em uma tabela
<thead>
Agrupa o conteúdo do cabeçalho em uma tabela
<time>
Define uma data / hora
<title>
Define um título para o documento
<tr>
Define uma linha em uma tabela
<track>
Define faixas de texto para elementos de mídia ( <video> e <audio>)
<u>
Define o texto sublinhado
<ul>
Define uma lista não ordenada
<var>
Define uma variável
<video>
Define um vídeo ou filme
<wbr>
Define uma possível quebra de linha
Principais Tags de HTML
Conheças as principais Tags HTML. Clique e veja também nosso artigoas Tags de Layout do HTML 5 e Estrutura básica de uma página HTML5.
Tags estruturais
<!– –>
Cria um comentário
<html> </html>
Envolve todo um documento html
<head> </head>
Envolve o cabeçalho de um documento html
<meta >
Fornece informações gerais sobre o documento
<style> </style>
Informações de estilo
<script> </script>
Linguagem script
<noscript> </noscript>
Conteúdo alternativo para quando a linguagem script não for suportada
<title> </title>
O título do documento
<body> </body>
Envolve o corpo (texto e tags) do documento html
· bgcolor – Cor de fundo #RRGGBB
· background – Imagem como plano de fundo
· text – Cor do texto principal
· link – Cor dos links existentes na página
· vlink – Cor do link já visitado
· alink – Cor do link que foi ativado
· marginheight – Elimina a margem esquerda apenas no Netscape
· marginwidth – Elimina a margem no topo da página apenas no Netscape
· topmargin – Elimina a margem no topo da página apenas no Internet Explorer
· leftmargin – Elimina a margem esquerda apenas no Internet Explorer
Cabeçalhos
<hn> </hn>
Cabeçalho nível n para n de 1 a 6
Parágrafos
<p> </p>
Um simples páragrafo
· align – Alinhamento do parágrafo: left, right, center e justify
Links
<a> </a>
Cria um link e inclui atributos em comum
· href – O URL do documento que será vinculado a este. Para e-mail: mailto e link externo: http
· name – O nome da âncora
· target – Identifica a janela ou local em que o link deverá ser aberto: blank, self, top, parent
· rel – Define os tipos de link que avançam
· rev – Define os tipos de link que revertem a ação
· acesskey – Atribui uma tecla de atalho para este elemento
· shape – Para uso com formas de objeto
· coords – Para uso com formas de objeto
· tabindex – Determina a ordem das guias
· onclick – É um evento JavaScript
· onmouseover – É um evento JavaScript
· onmouseout – É um evento JavaScript
Listas
<ol> </ol>
Uma lista ordenada
· start – Define a partir de qual número a listagem começa
· type – Tipos de caracteres ordenados: A, a, I, i, 1
<ul> </ul>
Uma lista não ordenada
· type – Tipos de caracteres não ordenados: disk, square, circle
<li> </li>
Um item da lista
· value – Numeração individual do item da lista
· type – Tipos de caracteres ordenados: A, a, I, i e 1 para listagem ordenada e disk, square e circle para não ordenada
<menu> </menu>
Um menu com uma lista de itens
<dir> </dir>
Uma listagem de diretórios
<dl> </dl>
Uma lista de definições ou glossário
<dt> </dt>
Marcao texto especificado como um termo de definição de um glossário
<dd> </dd>
Especifica o texto referente a um termo criado pela tag <dt> dentro de uma lista de definição
Formatação de caracteres
<em> </em>
Maior ênfase em itálico
<strong> </strong>
Maior ênfase em negrito
<code> </code>
Amostra de código
<kbd> </kbd>
Texto a ser digitado
<var> </var>
Uma variável ou espaço reservado para um outro valor
<samp> </samp>
Texto de amostra
<dfn> </dfn>
Aplica um formatação no texto definido como termo de um glossário
<cite> </cite>
Uma citação
<b> </b>
Texto em negrito
<i> </i>
Texto em itálico
<u> </u>
Texto sublinhado
<tt> </tt>
Fonte monoespaçada (texto semelhante à maquina de escrever)
<pre> </pre>
Texto pré-formatado
<strike> </strike>
Texto riscado
<s> </s>
Texto tachado
<sub> </sub>
Texto subscrito
<sup> </sup>
Texto sobrescrito
<big> </big>
Texto em fonte maior do que o padrão
<small> </small>
Texto em fonte menor do que o padrão
<blink> </blink>
Texto piscando somente no Nestcape
<marquee> </marquee>
Texto animado no Internet Explorer
Outros elementos
<hr>
Uma régua horizontal
· size – Espessura da linha em pixels
· width – Largura da linha em pixels ou porcentagem
· align – Alinhamento da linha em center, left, right
· color – Cor da linha em #RRGGBB
· noshade – Linha sólida
<br>
Uma quebra de linha
<center> </center>
Centralizar
<div> </div>
Conteúdo
· align – Alinhamento: left, center e right
<blockquote> </blockquote>
Texto com mais margem
<address> </address>
Assinaturas ou informações gerais sobre o autor de um documento
<font> </font>
Alterna tamanho , cor e tipo de fonte exibida
· size – O tamanho da fonte varia de 1 a 7
· color – A cor da fonte #RRGGBB
· face – O tipo da fonte
<basefonte>
Define o tamanho padrão para a fonte na página atual
· size – O tamanho da fonte varia de 1 a 7
Imagens
<img>
Insere uma imagem in-line no documento e inclui atributos comuns
· usemap – Um mapa de imagens do lado cliente
· src – O URL da imagem
· alt – Uma string de texto que será exibida em navegadores que não possam suportar imagens
· align – Determina o alinhamento de uma determinada imagem: top, middle, bottom, left e right
· height – É a altura sugerida em pixels
· width – É a extensão sugerida em pixels
· vspace – O espaço entre a imagem e o texto acima e abaixo dela
· hspace – O espaço entre a imagem e o texto à esquerda e à direita dela
· border – Largura da borda
Frames
<frameset> </frameset>
Define um frameset
· rows – Número de linhas no frame
· cols – Número de colunas no frame
· frameborder – Borda do frame
· framespacing – Espaçamento
· onload – É um evento intrínseco
· onunload – É um evento intrínseco
<frame> </frame>
Define um frameset
· name – É o nome do frame-alvo
· src – Chama a fonte de conteúdo do frame
· frameborder – Determina a borda do frame
· marginheight – Determina a largura das margens
· noresize – Determina a capacidade de redimensionar frames
· scrolling – Determina a capacidade de rolagem dentro dos frames: auto, yes e no
<iframe> </iframe>
Define um frame in-line
<noframes> </noframes>
Alterna o conteúdo quando os frames não são suportados
Tabelas
<table> </table>
Cria uma tabela
· background – Imagem de plano de fundo
· bgcolor – Cor de plano de fundo
· border – Largura da borda em pixels
· cols – Número de colunas
· cellpadding – Espaçamento nas células
· cellspacing – Espaçamento entre as células
· width – Largura da tabela
· align – Alinhamento da tabela: left, center, right
· bordercolor – Cor na borda da tabela
<caption> </caption>
A legenda para a tabela
<tr> </tr>
Uma linha na tabela
· align – O alinhamento horizontal do conteúdo das células dentro dessa linha com os valores possíveis left, right, center, justify e char
· bgcolor – Cor de fundo
· valign – o alinhamento vertical do conteúdo das células dentro dessa linha com os valores possíveis top, middle, bottom e baseline
· background – Figura como plano de fundo
<th> </th>
Um cabeçalho de célula da tabela
· align – Alinhamento horizontal
· valign – Alinhamento vertical
· bgcolor – Cor de plano de fundo
· rowspan – O número de linhas pelo qual essa célula se expandirá
· colspan – O número de colunas pelo qual essa célula se expandirá
· nowrap – Desliga o enquadramento de texto em uma célula
<td> </td>
Define uma célula de dados da tabela
· align – Alinhamento horizontal
· valign – Alinhamento vertical
· bgcolor – Cor de plano de fundo
· rowspan – O número de linhas pelo qual essa célula se expandirá
· colspan – O número de colunas pelo qual essa célula se expandirá
· nowrap – Desliga o enquadramento de texto em uma célula
· width – Largura da célula
· height – Altura da célula
Formulários
<form> </form>
Define um formulário
· action – Responsável por determinar o exato local para onde as informações coletadas no formulário deverão ser enviadas
· method – Método de empacotamento dos dados do formulário: get, post e enctype="multipart/form-data"
· name – Nome do objeto
<input>
Caixa de texto
· type – Tipo de dado: text, file, radio, checkbox, hidden, password, submit, reset, button, image
· name – Identificação do campo
· size – Largura
· maxlength – Número máximo de caracteres permitidos
· value – Texto que aparece dentro da caixa ou nome do botão
· checked value – Valor assumido quando este campo for selecionado
<textarea> </textarea>
Permite criar elementos de entrada com características de texto
· rows – Tamanho da linha da caixa de texto
· cols – Tamanho da coluna da caixa de texto
· name – Identificação do campo
· wrap – Quebra de linha da caixa de texto: off, virtual, physical
<select> </select>
Seleção
· name – Identificador
<option> </option>
Opção
· value – Valor do campo
10 recursos HTML5 úteis que você pode não estar usando
O HyperText Markup Language nos acompanha desde os primórdios da web. É o seu tijolo mais básico. Podem surgir novas tecnologias, plugins, frameworks, conteúdo rico, mas o bom e velho HTML continua sendo a base de tudo e aprender seus mais profundos nuances é fundamental para os desenvolvedores.
O HTML5 é a implementação atual da linguagem, que causou furor em seu lançamento, com tantas novidades em relação ao padrão anterior, mas agora ele se mesclou ao pano de fundo e parece não ter mais a mesma importância. Isso é um erro: ainda existem segredos a serem desvendados, assim como recursos que acabaram sendo esquecidos mas continuam práticos.
Tapas Adhikary é um desenvolvedor indiano com mais de 15 anos de experiência em Engenharia de Software, que compartilha seu conhecimento sempre que possível. Em um artigo publicado na internet, ele mostra 10 propriedades e recursos escondidos no HTML5 que podem ser muito úteis em diversos projetos, mas poucas pessoas lembram.
Com sua autorização, traduzimos e reproduzimos o artigo na íntegra:
“HTML5 não é uma coisa nova. Temos usado vários recursos desde o lançamento inicial (janeiro de 2008). Como parte da iniciativa # 100DaysOfCode, observei de perto a lista de recursos HTML5 novamente. Veja o que eu encontrei? Eu realmente não usei muito até agora!
Neste artigo, estou listando dez desses recursos HTML5 que não usei muito no passado, mas os considero úteis agora. Eu também criei um fluxo de exemplo de trabalho e hospedado no Netlify. Espero que você ache útil também.
Ótimo, então vamos começar com a explicação, o código e dicas rápidas sobre cada um deles. Você pode me seguir no Twitter para ver meus artigos e trabalhos futuros.
1) Tag details
A tag <details> fornece detalhes sob demanda ao usuário. Se você precisar mostrar conteúdo ao usuário sob demanda, use esta tag. Por padrão, o widget está fechado. Quando aberto, ele se expande e exibe o conteúdo interno.
A tag <summary> é usada com <details> para especificar um título visível para ela.
Código:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<details>
<summary>Click Here to get the user details</summary>
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Location</th>
<th>Job</th></tr>
<tr>
<td>1</td>
<td>Adam</td>
<td>Huston</td>
<td>UI/UX</td>
</tr>
</table>
</details>
Veja funcionando:
Você pode mexer com a tag aqui: https://html5-tips.netlify.app/details/index.html
Dicas rápidas:
Use-o no ReadMe do GitHub para mostrar as informações detalhadas sob demanda. Aqui está um exemplo de como escondi uma lista enorme de propriedades do componente de React e a mostrei apenas sob demanda. Legal certo?
2) Conteúdo editável
contenteditable é um atributo que pode ser definido em um elemento para tornar o conteúdo editável. Funciona com elementos como DIV, P, UL, etc. Você deve especificá-lo como <element contenteditable = “true | false”>.
Observação: quando o atributo contenteditable não é definido em um elemento, ele será herdado de seu pai.
Código:
1
2
3
4
5
6
<h2> Shoppping List(Content Editable) </h2>
<ul class="content-editable" contenteditable="true">
<li> 1. Milk </li>
<li> 2. Bread </li>
<li> 3. Honey </li>
</ul>
Veja funcionando:
Você pode mexer com a propriedade aqui: https://html5-tips.netlify.app/content-editable/index.html
Dicas rápidas:
Um elemento span ou div podem ser editados com esse atributo e você pode adicionar qualquer conteúdo avançado usando o estilo CSS. Isso será muito melhor do que lidar com campos de entrada. Experimente!
3) Mapa de imagem
A tag <map> ajuda a definir um mapa de imagem. Um mapa de imagem é uma imagem com uma ou mais áreas clicáveis dentro dela. A tag do mapa acompanha uma tag <area> para determinar as áreas clicáveis. As áreas clicáveis podem ser qualquer uma dessas formas, retângulo, círculo ou região poligonal. Se você não especificar nenhuma forma, ele considera a imagem inteira.
Código:
1
2
3
4
5
6
7
8
9
10
11
<div>
<img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">
<map name="circusmap">
<area shape="rect" coords="67,114,207,254" href="elephant.htm">
<area shape="rect" coords="222,141,318, 256" href="lion.htm">
<area shape="rect" coords="343,111,455, 267" href="horse.htm">
<area shape="rect" coords="35,328,143,500" href="clown.htm">
<area shape="circle" coords="426,409,100" href="clown.htm">
</map>
</div>
Veja funcionando:
Você pode mexer com a tag aqui: https://html5-tips.netlify.app/map/index.html
Dicas rápidas:
O mapa de imagem tem suas próprias desvantagens, mas você pode usá-lo para apresentações visuais. Que tal experimentar com uma foto de família e detalhar a foto do indivíduo (talvez as antigas que sempre apreciamos!).
4) Marcação de conteúdo
Use a tag <mark> para destacar qualquer conteúdo de texto.
Código:
1
<p> Did you know, you can <mark>"Highlight something interesting"</mark> just with an HTML tag? </p>
Veja funcionando:
Você pode mexer com a tag aqui: https://html5-tips.netlify.app/mark/index.html
Dicas rápidas:
Você sempre pode alterar a cor de destaque usando css:
1
2
3
4
mark {
background-color: green;
color: #FFFFFF;
}
5) data-* attribute
Os atributos data- * são usados para armazenar dados personalizados privados para a página ou aplicativo. Os dados armazenados podem ser usados no código JavaScript para criar mais experiências do usuário.
Os atributos data- * consistem em duas partes:
· O nome do atributo não deve conter letras maiúsculas e deve ter pelo menos um caractere depois do prefixo “data-“
· O valor do atributo pode ser qualquer string
Código:
1
2
3
4
5
6
7
8
9
<h2> Know data attribute </h2>
<div
class="data-attribute"
id="data-attr"
data-custom-attr="You are just Awesome!">
I have a hidden secret!
</div>
<button onclick="reveal()">Reveal</button>
Então, em JavaScript:
1
2
3
4
5
function reveal() {
let dataDiv = document.getElementById('data-attr');
let value = dataDiv.dataset['customAttr'];
document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}
Observação: para ler os valores desses atributos em JavaScript, você pode usar getAttribute () com seu nome HTML completo (ou seja, data-custom-attr), mas o padrão define uma maneira mais simples: usando uma propriedade dataset.
Veja funcionando:
Você pode mexer com o atributo aqui: https://html5-tips.netlify.app/data-attribute/index.html
Dicas rápidas:
Você pode usá-lo para armazenar alguns dados na página e depois passá-los usando a chamada REST para o servidor. Outro caso de uso poderia ser a maneira como eu mostro uma contagem de mensagens de notificação aqui.
6) Tag output
A tag <output> representa o resultado de um cálculo. Normalmente, este elemento define uma região que será usada para exibir a saída de texto de alguns cálculos.
Código:
1
2
3
4
5
<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
<input type="number" id="a" value="0">
* <input type="number" id="b" value="0">
= <output name="x" for="a b"></output>
</form>
Veja funcionando:
Você pode mexer com a tag aqui: https://html5-tips.netlify.app/output/index.html
Dicas rápidas:
Se você estiver executando qualquer cálculo no JavaScript do lado do cliente e quiser que o resultado reflita na página, use a tag <output>. Você não precisa percorrer as etapas extras para obter um elemento usando getElementById ().
7) Datalist
A tag <datalist> especifica uma lista de opções predefinidas e permite ao usuário adicionar mais opções. Ele fornece um recurso de preenchimento automático que permite obter as opções desejadas com uma digitação antecipada.
Código:
1
2
3
4
5
6
7
8
9
10
11
12
<form action="" method="get">
<label for="fruit">Choose your fruit from the list:</label>
<input list="fruits" name="fruit" id="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Orange">
<option value="Banana">
<option value="Mango">
<option value="Avacado">
</datalist>
<input type="submit">
</form>
Veja funcionando:
Você pode mexer com a tag aqui: https://html5-tips.netlify.app/datalist/index.html
Dicas rápidas:
Em que é diferente da tag tradicional <select> – <option>? A tag select é para selecionar um ou mais itens das opções em que você precisa percorrer a lista para escolher. Datalist é o recurso avançado com suporte para preenchimento automático.
8) Range(Slider)
range é um tipo de input que apresenta um seletor baseado em uma determinada faixa de valores.
Código:
1
2
3
4
5
6
7
8
9
10
11
12
13
<form method="post">
<input
type="range"
name="range"
min="0"
max="100"
step="1"
value=""
onchange="changeValue(event)"/>
</form>
<div class="range">
<output id="output" name="result"> </output>
</div>
Veja funcionando:
Você pode mexer com a tag aqui: https://html5-tips.netlify.app/range/index.html
Dicas rápidas:
Não existe nada chamado slider em HTML5!
https://twitter.com/tapasadhikary/status/1294148715133902848
9) Tag meter
Use a tag <meter> para medir os dados dentro de um determinado intervalo.
Código:
1
2
3
4
5
<label for="home">/home/atapas</label>
<meter id="home" value="4" min="0" max="10">2 out of 10</meter><br>
<label for="root">/root</label>
<meter id="root" value="0.6">60%</meter><br>
Veja funcionando:
Você pode mexer com a tag aqui: https://html5-tips.netlify.app/meter/index.html
Dicas rápidas:
Não use a tag <meter> para um tipo de indicador de progresso da experiência do usuário. Temos a tag <progress> do HTML5 para isso.
1
2
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
10) Inputs
Esta parte é mais conhecida por nós com o uso de tipos de entrada como texto, senha, etc. Existem alguns usos especiais dos tipos de entrada:
Código:
required
Marque um campo de entrada como obrigatório.
1
<input type="text" id="username1" name="username" required>
autofocus
Fornece foco no elemento deentrada automaticamente, colocando o cursor sobre ele.
1
<input type="text" id="username2" name="username" required autofocus>
validação por regex
Você pode especificar um padrão usando regex para validar a entrada.
1
2
3
4
5
<input type="password"
name="password"
id="password"
placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter"
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>
escolha de cor
Um seletor de cores simples.
1
2
<input type="color" onchange="showColor(event)">
<p id="colorMe">Color Me!</p>
E agora?
Bem, tenho certeza que deixei para trás alguns úteis. Que tal você completar a lista? Forneça comentários sobre esta postagem e seu aprendizado em HTML5. Te vejo em breve no meu próximo artigo.
Sim, todo o código usado neste artigo pode ser encontrado no repositório git mencionado abaixo. Por favor, dê ao repo uma estrela, se você gostou do trabalho.
https://github.com/atapas/html-tips-tricks
Se foi útil para você, por favor, curta/compartilhe para que alcance outras pessoas também. Sou apaixonado por UI / UX e adoro compartilhar meu conhecimento por meio de artigos. Por favor, visite meu blog para saber mais.
Você pode gostar também de:
· My Favorite JavaScript Tips and Tricks
· 10 lesser-known Web APIs you may want to use
· DevTools – My Favorite Tips and Tricks
Fique à vontade para me seguir no Twitter @tapasadhikary.”
Publicado originalmente como “10 useful HTML5 features, you may not be using” em 17 de setembro de 2020. Traduzido e republicado com autorização do autor.
Continue navegando
Materiais relacionados
10 pág.
40 pág.
22 pág.
Perguntas relacionadas
Compartilhar