HTML - ALGUMAS TAGS
Autor: Wellington Fontes | Publicado: 2017-07-17T17:15:00-07:00


TAGS ÚTEIS

1. &lt;meter&gt;

O HTML 5 introduziu uma série de&nbsp;tags&nbsp;semânticas para diferentes ocasiões. Ocasiões bem específicas. Existe, por exemplo, uma&nbsp;tag&nbsp;para quando você precisa expressar uma medida em uma página da web, dentro de um determinado limite.

&lt;meter&gt;&nbsp;foi criada para aquele momento em que você precisa especificar um espaço em disco, uma nota de crítica, o resultado de uma prova, qualquer valor que faça parte de um escopo.

Os atributos mais comuns são&nbsp;value,&nbsp;min&nbsp;e&nbsp;max. O primeiro indica a medida propriamente dita, enquanto os outros servem para marcar os limites. Suponhamos que você queira indicar o espaço ocupado de 300GB de um disco rígido de 500GB, você escreveria da seguinte forma:

&amp;lt;meter value="300" min="0" max="500"&amp;gt;300GB de 500GB&amp;lt;/meter&amp;gt;



“Mas não é muita complicação para escrever algo que eu sempre fiz?”, você pode estar se perguntando. Em navegadores com suporte a esta&nbsp;tag, o resultado será exibido&nbsp;visualmente:



Pense agora em gráficos, dados dinâmicos e jQuery e você começará a vislumbrar a utilidade de &lt;meter&gt;…

2. &lt;progress&gt;

Se você entendeu a utilidade do &lt;meter&gt;, pode ter pensado: “eu poderia fazer uma barra de progresso com isso…”. Na verdade, existe uma&nbsp;tag&nbsp;especificamente criada para essa função!

Chega de gambiarras, Javascripts complicados,&nbsp;loadings&nbsp;em Flash ou GIFs animados. Com o HTML 5, você pode simplesmente usar a&nbsp;tag&nbsp;&lt;progress&gt;&nbsp;e ser feliz.

Ela possui dois atributos apenas:&nbsp;value&nbsp;(que marca o estado atual do progresso) e&nbsp;max&nbsp;(que indica a meta a ser alcançada). Então, para especificar o progresso de uma tarefa que esta na metade do caminho, você pode escrever da seguinte forma:

&lt;progress value=”50″ max=”100″&gt;50%&lt;/progress&gt;

O resultado visual é similar ao do &lt;meter&gt;, exceto que a barra é animada, para indicar uma progressão.

Perceba que, em ambos os casos, o texto dentro do elemento é completamente ignorado por navegadores com suporte às&nbsp;tags. Convém inserir apenas como uma alternativa não-visual da informação para navegadores mais antigos.

3. &lt;kbd&gt; e &lt;samp&gt;

Ao contrário das duas&nbsp;tags&nbsp;anteriores, esse par aqui não gera nenhum efeito visual nem tampouco foram criadas com o HTML 5. Na verdade, elas são bem antigas e são renderizadas pelo navegador como o bom e velho &lt;code&gt;.

A grande vantagem de&nbsp;&lt;kbd&gt;&nbsp;e&nbsp;&lt;samp&gt; é sua especificidade. A primeira é utilizada para representar entrada de dados do usuário, geralmente via teclado. A segunda representa uma amostra da saída de dados de um programa ou sistema computacional.

Específico demais? Se você utiliza &lt;code&gt; com frequência, mas deseja um &lt;code&gt; “diferente” sem ter que usar uma classe e sem ligar para a semântica, experimente estas alternativas e declare seus estilos no CSS.

Exemplos:

&lt;kbd&gt;Essa linha é uma entrada de dados&lt;/kbd&gt;
&lt;samp&gt;Essa linha é uma saída de dados&lt;/samp&gt;

4. &lt;small&gt;

Eu sei o que você está pensando agora: “&lt;small&gt; é&nbsp;deprecated, ninguém usa mais desde que o CSS passou a definir o tamanho das fontes dos elementos”. Tirando a parte do&nbsp;deprecated, você está até certo. Mas isso foi antes do HTML 5.

Com o advento do HTML 5, o&nbsp;&lt;small&gt;&nbsp;deixou de ser aquela&nbsp;tag&nbsp;sem graça que apenas reduzia o tamanho da fonte para ganhar um valor semântico.

Agora, a&nbsp;tag&nbsp;simboliza elementos que normalmente seriam escritos em letra miúda fora da web, como avisos, regras, restrições legais, direitos de uso etc.

Vamos dar uma olhada como funciona:

&lt;small&gt;Copyright©2014&lt;/small&gt;

5. &lt;optgroup&gt;

Imagine uma longa lista de opções de um &lt;select&gt;, mas longa mesmo. Tão longa que o bom-senso recomenda dividi-la em seções. Como fazer? Entra em cena o&nbsp;&lt;optgroup&gt;.

Com esta&nbsp;tag&nbsp;é possível criar divisões dentro de um menu de opções, facilitando o trabalho do usuário de encontrar a escolha certa.

Vamos dar uma olhada como funciona:

&lt;select id=”filmes” name=”filmes”&gt;
&lt;optgroup label=”Terror”&gt;
&lt;option value=”1″&gt;O Exorcista&lt;/option&gt;
&lt;option value=”2″&gt;A Bruxa de Blair&lt;/option&gt;
&lt;option value=”3″&gt;Atividade Paranormal&lt;/option&gt;
&lt;/optgroup&gt;
&lt;optgroup label=”Comédia”&gt;
&lt;option value=”4″&gt;Se Beber, Não Case&lt;/option&gt;
&lt;option value=”5″&gt;Todo Mundo em Pânico&lt;/option&gt;
&lt;option value=”6″&gt;Curtindo a Vida Adoidado&lt;/option&gt;
&lt;/optgroup&gt;
&lt;optgroup label=”Drama”&gt;
&lt;option value=”7″&gt;Crepúsculo&lt;/option&gt;
&lt;option value=”8″&gt;Amistad&lt;/option&gt;
&lt;option value=”9″&gt;Patch Adams&lt;/option&gt;
&lt;/optgroup&gt;
&lt;/select&gt;

Visualmente, o resultado, sem nenhum estilo aplicado, seria esse:



6. &lt;acronym&gt; e &lt;abbr&gt;

Uma das&nbsp;tags&nbsp;mais úteis e uma das menos utilizadas do velho HTML, o&nbsp;&lt;acronym&gt;&nbsp;é ao mesmo tempo semântico e visual. Ela serve para explicar um termo, acrônimo ou abreviatura que pode não ser do conhecimento do usuário. Na prática, funciona como o valor&nbsp;title&nbsp;quando você passa o&nbsp;mouse&nbsp;por cima do elemento.

No HTML 5, o &lt;acronym&gt; não é mais suportado e foi substituído pelo&nbsp;&lt;abbr&gt;, que cumpre rigorosamente a mesma função.

Veja um exemplo:

&lt;acronym title=”Search Engine Optimization – Otimização para Mecanismos de Busca”&gt;SEO&lt;/acronym&gt;

7. &lt;ins&gt; e &lt;del&gt;

Se você trabalha com edição e revisão de texto e não conhece ainda estas duas&nbsp;tags, eu acho que acabei de salvar seu dia e talvez seu emprego.

A&nbsp;tag&nbsp;&nbsp;&lt;ins&gt;&nbsp;serve para marcar o texto que foi inserido em um determinado conteúdo desde sua versão anterior. Visualmente, o novo conteúdo é exibido como sublinhado, mas você pode alterar isso à vontade com folhas de estilo.

Já a&nbsp;tag&nbsp;&lt;des&gt;&nbsp;é seu exato oposto e serve para marcar o texto que foi ou deve ser deletado de um determinado conteúdo desde a última versão. Visualmente, o conteúdo aparece riscado, mas você pode alterar isso à vontade com folhas de estilo.

Veja um exemplo:

&lt;del&gt;Eu manjo muito de HTML&lt;/del&gt; &lt;ins&gt;Meu conhecimento de HTML está sempre crescendo&lt;/ins&gt;.

8. &lt;wbr&gt;

Com a web responsiva onde você não faz a menor ideia onde o navegador vai quebrar suas linhas quando o usuário estiver lendo, é sempre bom ter o mínimo de controle possível.

Para dar esse controle e sugerir ao navegador onde uma quebra de linha pode acontecer, existe a&nbsp;tag&nbsp;&lt;wbr&gt;.&nbsp;É perfeita para palavras muito longas, onde uma quebra arbitrária poderia prejudicar a compreensão ou mesmo gerar palavras indesejadas.

Perceba que&nbsp;não é o mesmo que um &lt;br /&gt;, onde a quebra de linha é&nbsp;obrigatória. Trata-se de uma orientação ao navegador para, caso seja necessário quebrar uma linha por perto, que seja quebrada onde a&nbsp;tag&nbsp;se encontra.

Vejamos um exemplo:

&lt;p&gt;Use a função getElements&lt;wbr&gt;ByTagName() para recuperar os elementos&lt;/p&gt;

9.&lt;address&gt;

Semanticamente falando, esta&nbsp;tag&nbsp;adiciona as informações de contato do autor de uma determinada página ou artigo. Se a&nbsp;tag&nbsp;&lt;address&gt;&nbsp;está contida dentro de &lt;article&gt;, então, a informação representa o autor daquele artigo em específico. Caso contrário, representa o autor do documento como um todo.

Visualmente falando, o conteúdo costuma ser exibido em itálico, com a separação de uma linha antes e outra depois, mas tudo isso pode ser ajustado com CSS.

Esta&nbsp;tag&nbsp;está aí desde 1993 e ganhou um reforço com o advento das&nbsp;marcações do HTML 5. Desde aquela época, costuma-se confundir seu uso e aplicar a&nbsp;tag&nbsp;para marcar endereços físicos. Isso é errado. Informações de contato, nesse caso, referem-se a nome, e-mail, site ou outra forma de contato, via web, com o autor daquele segmento. Se nenhum outro meio estiver disponível (o que seria extremamente raro em pleno século XXI), o endereço físico pode ser utilizado.

Vejamos um bom exemplo:

&lt;address&gt;
Esse artigo é de autoria de:&lt;br /&gt;
&lt;a href=”mailto:redacao@codigofonte.com.br”&gt;Redação Código Fonte&lt;/a&gt;
&lt;/address&gt;

10. &lt;cite&gt; e &lt;q&gt;

Quem trabalha com conteúdo textual, já conhece a&nbsp;tag&nbsp;&lt;blockquote&gt;, para encapsular citações no texto, geralmente renderizadas com uma tabulação recuada e uma fonte diferente.

Mas existem outros métodos para inserir citações, inclusive, mais adequados para citações curtas.

No HTML 5, nós temos o&nbsp;&lt;q&gt;&nbsp;para especificar uma citação. Visualmente, não há recuos e a informação é exibida&nbsp;inline, com o navegador gerando as aspas de abertura e fechamento para você.

Você poderia escrever do lado quem é o autor da citação, mas semanticamente é mais adequado envolver esse dado com&nbsp;&lt;cite&gt;, de forma que o navegador também consiga identificar essa informação. O conteúdo é gerado em&nbsp;itálico,&nbsp;a menos que seja especificado o contrário na folha de estilo.
Vamos juntar tudo agora e ver como fica:&lt;q&gt;Um país se faz com homens e livros. &lt;cite&gt;Monteiro Lobato&lt;/cite&gt;.&lt;/q&gt;Conclusão

Acredite ou não, estas são apenas uma amostra das&nbsp;tags&nbsp;disponíveis na especificação do HTML e que são pouco utilizadas. Mantenha-se sempre atualizado e você ainda poderá descobrir algumas que serão essenciais para seu próximo projeto.


OUTRAS TAGS

&lt;!– –&gt;

Cria um comentário

&lt;html&gt; &lt;/html&gt;

Envolve todo um documento html

&lt;head&gt; &lt;/head&gt;

Envolve o cabeçalho de um documento html

&lt;meta &gt;

Fornece informações gerais sobre o documento

&lt;style&gt; &lt;/style&gt;

Informações de estilo

&lt;script&gt; &lt;/script&gt;

Linguagem script

&lt;noscript&gt; &lt;/noscript&gt;

Conteúdo alternativo para quando a linguagem script não for suportada

&lt;title&gt; &lt;/title&gt;

O título do documento

&lt;body&gt; &lt;/body&gt;

Envolve o corpo (texto e tags) do documento html

bgcolor&nbsp;– Cor de fundo #RRGGBB


background&nbsp;– Imagem como plano de fundo
text&nbsp;– Cor do texto principal
link&nbsp;– Cor dos links existentes na página
vlink&nbsp;– Cor do link já visitado
alink&nbsp;– Cor do link que foi ativado
marginheight&nbsp;– Elimina a margem esquerda apenas no Netscape
marginwidth&nbsp;– Elimina a margem no topo da página apenas no Netscape
topmargin&nbsp;– Elimina a margem no topo da página apenas no Internet Explorer
leftmargin&nbsp;– Elimina a margem esquerda apenas no Internet Explorer


Cabeçalhos

&lt;hn&gt; &lt;/hn&gt;

Cabeçalho nível n para n de 1 a 6

Parágrafos

&lt;p&gt; &lt;/p&gt;

Um simples páragrafo

align&nbsp;– Alinhamento do parágrafo: left, right, center e justify


Links

&lt;a&gt; &lt;/a&gt;

Cria um link e inclui atributos em comum

href&nbsp;– O URL do documento que será vinculado a este. Para e-mail: mailto e link externo: http


name&nbsp;– O nome da âncora
target&nbsp;– Identifica a janela ou local em que o link deverá ser aberto: blank, self, top, parent
rel&nbsp;– Define os tipos de link que avançam
rev&nbsp;– Define os tipos de link que revertem a ação
acesskey&nbsp;– Atribui uma tecla de atalho para este elemento
shape&nbsp;– Para uso com formas de objeto
coords&nbsp;– Para uso com formas de objeto
tabindex&nbsp;– Determina a ordem das guias
onclick&nbsp;– É um evento JavaScript
onmouseover&nbsp;– É um evento JavaScript
onmouseout&nbsp;– É um evento JavaScript


Listas

&lt;ol&gt; &lt;/ol&gt;

Uma lista ordenada

start&nbsp;– Define a partir de qual número a listagem começa


type&nbsp;– Tipos de caracteres ordenados: A, a, I, i, 1


&lt;ul&gt; &lt;/ul&gt;

Uma lista não ordenada

type&nbsp;– Tipos de caracteres não ordenados: disk, square, circle


&lt;li&gt; &lt;/li&gt;

Um item da lista

value&nbsp;– Numeração individual do item da lista


type&nbsp;– Tipos de caracteres ordenados: A, a, I, i e 1 para listagem ordenada e disk, square e circle para não ordenada


&lt;menu&gt; &lt;/menu&gt;

Um menu com uma lista de itens

&lt;dir&gt; &lt;/dir&gt;

Uma listagem de diretórios

&lt;dl&gt; &lt;/dl&gt;

Uma lista de definições ou glossário

&lt;dt&gt; &lt;/dt&gt;

Marca o texto especificado como um termo de definição de um glossário

&lt;dd&gt; &lt;/dd&gt;

Especifica o texto referente a um termo criado pela tag&nbsp;&lt;dt&gt;&nbsp;dentro de uma lista de definição

Formatação de caracteres

&lt;em&gt; &lt;/em&gt;

Maior ênfase em itálico

&lt;strong&gt; &lt;/strong&gt;

Maior ênfase em negrito

&lt;code&gt; &lt;/code&gt;

Amostra de código

&lt;kbd&gt; &lt;/kbd&gt;

Texto a ser digitado

&lt;var&gt; &lt;/var&gt;

Uma variável ou espaço reservado para um outro valor

&lt;samp&gt; &lt;/samp&gt;

Texto de amostra

&lt;dfn&gt; &lt;/dfn&gt;

Aplica um formatação no texto definido como termo de um glossário

&lt;cite&gt; &lt;/cite&gt;

Uma citação

&lt;b&gt; &lt;/b&gt;

Texto em negrito

&lt;i&gt; &lt;/i&gt;

Texto em itálico

&lt;u&gt; &lt;/u&gt;

Texto sublinhado

&lt;tt&gt; &lt;/tt&gt;

Fonte monoespaçada (texto semelhante à maquina de escrever)

&lt;pre&gt; &lt;/pre&gt;

Texto pré-formatado

&lt;strike&gt; &lt;/strike&gt;

Texto riscado

&lt;s&gt; &lt;/s&gt;

Texto tachado

&lt;sub&gt; &lt;/sub&gt;

Texto subscrito

&lt;sup&gt; &lt;/sup&gt;

Texto sobrescrito

&lt;big&gt; &lt;/big&gt;

Texto em fonte maior do que o padrão

&lt;small&gt; &lt;/small&gt;

Texto em fonte menor do que o padrão

&lt;blink&gt; &lt;/blink&gt;

Texto piscando somente no Nestcape

&lt;marquee&gt; &lt;/marquee&gt;

Texto animado no Internet Explorer

Outros elementos

&lt;hr&gt;

Uma régua horizontal

size&nbsp;– Espessura da linha em pixels


width&nbsp;– Largura da linha em pixels ou porcentagem
align&nbsp;– Alinhamento da linha em center, left, right
color&nbsp;– Cor da linha em #RRGGBB
noshade&nbsp;– Linha sólida


&lt;br&gt;

Uma quebra de linha

&lt;center&gt; &lt;/center&gt;

Centralizar

&lt;div&gt; &lt;/div&gt;

Conteúdo

align&nbsp;– Alinhamento: left, center e right


&lt;blockquote&gt; &lt;/blockquote&gt;

Texto com mais margem

&lt;address&gt; &lt;/address&gt;

Assinaturas ou informações gerais sobre o autor de um documento

&lt;font&gt; &lt;/font&gt;

Alterna tamanho , cor e tipo de fonte exibida

size&nbsp;– O tamanho da fonte varia de 1 a 7


color&nbsp;– A cor da fonte #RRGGBB
face&nbsp;– O tipo da fonte


&lt;basefonte&gt;

Define o tamanho padrão para a fonte na página atual

size&nbsp;– O tamanho da fonte varia de 1 a 7


Imagens

&lt;img&gt;

Insere uma imagem in-line no documento e inclui atributos comuns

usemap&nbsp;– Um mapa de imagens do lado cliente


src&nbsp;– O URL da imagem
alt&nbsp;– Uma string de texto que será exibida em navegadores que não possam suportar imagens
align&nbsp;– Determina o alinhamento de uma determinada imagem: top, middle, bottom, left e right
height&nbsp;– É a altura sugerida em pixels
width&nbsp;– É a extensão sugerida em pixels
vspace&nbsp;– O espaço entre a imagem e o texto acima e abaixo dela
hspace&nbsp;– O espaço entre a imagem e o texto à esquerda e à direita dela
border&nbsp;– Largura da borda


Frames

&lt;frameset&gt; &lt;/frameset&gt;

Define um frameset

rows&nbsp;– Número de linhas no frame


cols&nbsp;– Número de colunas no frame
frameborder&nbsp;– Borda do frame
framespacing&nbsp;– Espaçamento
onload&nbsp;– É um evento intrínseco
onunload&nbsp;– É um evento intrínseco


&lt;frame&gt; &lt;/frame&gt;

Define um frameset

name&nbsp;– É o nome do frame-alvo


src&nbsp;– Chama a fonte de conteúdo do frame
frameborder&nbsp;– Determina a borda do frame
marginheight&nbsp;– Determina a largura das margens
noresize&nbsp;– Determina a capacidade de redimensionar frames
scrolling&nbsp;– Determina a capacidade de rolagem dentro dos frames: auto, yes e no


&lt;iframe&gt; &lt;/iframe&gt;

Define um frame in-line

&lt;noframes&gt; &lt;/noframes&gt;

Alterna o conteúdo quando os frames não são suportados

Tabelas

&lt;table&gt; &lt;/table&gt;

Cria uma tabela

background&nbsp;– Imagem de plano de fundo


bgcolor&nbsp;– Cor de plano de fundo
border&nbsp;– Largura da borda em pixels
cols&nbsp;– Número de colunas
cellpadding&nbsp;– Espaçamento nas células
cellspacing&nbsp;– Espaçamento entre as células
width&nbsp;– Largura da tabela
align&nbsp;– Alinhamento da tabela: left, center, right
bordercolor&nbsp;– Cor na borda da tabela


&lt;caption&gt; &lt;/caption&gt;

A legenda para a tabela

&lt;tr&gt; &lt;/tr&gt;

Uma linha na tabela

align&nbsp;– O alinhamento horizontal do conteúdo das células dentro dessa linha com os valores possíveis left, right, center, justify e char


bgcolor&nbsp;– Cor de fundo
valign&nbsp;– o alinhamento vertical do conteúdo das células dentro dessa linha com os valores possíveis top, middle, bottom e baseline
background&nbsp;– Figura como plano de fundo


&lt;th&gt; &lt;/th&gt;

Um cabeçalho de célula da tabela

align&nbsp;– Alinhamento horizontal


valign&nbsp;– Alinhamento vertical
bgcolor&nbsp;– Cor de plano de fundo
rowspan&nbsp;– O número de linhas pelo qual essa célula se expandirá
colspan&nbsp;– O número de colunas pelo qual essa célula se expandirá
nowrap&nbsp;– Desliga o enquadramento de texto em uma célula


&lt;td&gt; &lt;/td&gt;

Define uma célula de dados da tabela

align&nbsp;– Alinhamento horizontal


valign&nbsp;– Alinhamento vertical
bgcolor&nbsp;– Cor de plano de fundo
rowspan&nbsp;– O número de linhas pelo qual essa célula se expandirá
colspan&nbsp;– O número de colunas pelo qual essa célula se expandirá
nowrap&nbsp;– Desliga o enquadramento de texto em uma célula
width&nbsp;– Largura da célula
height&nbsp;– Altura da célula


Formulários

&lt;form&gt; &lt;/form&gt;

Define um formulário

action&nbsp;– Responsável por determinar o exato local para onde as informações coletadas no formulário deverão ser enviadas


method&nbsp;– Método de empacotamento dos dados do formulário: get, post e enctype="multipart/form-data"
name&nbsp;– Nome do objeto


&lt;input&gt;

Caixa de texto

type&nbsp;– Tipo de dado: text, file, radio, checkbox, hidden, password, submit, reset, button, image


name&nbsp;– Identificação do campo
size&nbsp;– Largura
maxlength&nbsp;– Número máximo de caracteres permitidos
value&nbsp;– Texto que aparece dentro da caixa ou nome do botão
checked value&nbsp;– Valor assumido quando este campo for selecionado


&lt;textarea&gt; &lt;/textarea&gt;

Permite criar elementos de entrada com características de texto

rows&nbsp;– Tamanho da linha da caixa de texto


cols&nbsp;– Tamanho da coluna da caixa de texto
name&nbsp;– Identificação do campo
wrap&nbsp;– Quebra de linha da caixa de texto: off, virtual, physical


&lt;select&gt; &lt;/select&gt;

Seleção

name&nbsp;– Identificador


&lt;option&gt; &lt;/option&gt;

Opção

value&nbsp;– Valor do campo