Atributos HTML
Aqui, examinaremos todos os atributos Html e seu uso. Um dos principais recursos do HTML é o uso de atributos, que fornecem informações adicionais sobre os elementos HTML. Um elemento HTML possui atributos contendo vários parâmetros que permitem que o elemento seja personalizado ou alterado de várias maneiras para atender aos requisitos do usuário.
Aqui está um exemplo do atributo maxlength e action em Html:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
style="color:#6f0722; font-size: 12px;"
Form and Maxlength Attribute
action=""
Username:
type="text" name="username" maxlength="10" placeholder="Enter your Username here"
Password:
type="password" name="Password" maxlength="8" placeholder="Enter your 8 digit password"
type="submit" value="Submit"
Lista de Atributos HTML
Os atributos HTML são explicados aqui. A tabela abaixo lista todos os atributos HTML e os elementos nos quais eles podem ser usados:
| Atributo | Pertence a | Visão geral |
|---|---|---|
| aceitar | <entrada> | Permite que o servidor aceite certos tipos de arquivos (somente para type=”arquivo”) |
| aceitar conjunto de caracteres | <forma> | Fornece detalhes sobre a codificação de caracteres a ser usada para execução do formulário . |
| chave de acesso | Atributos Globais | Ativa/enfoca um elemento com uma tecla de atalho |
| Ação | <forma> | Fornece instruções sobre para onde enviar dados de formulário após o envio em atributos HTML |
| alinhar | Não suportado em HTML 5. | Alinhe os elementos de acordo com os elementos circundantes. Em vez disso, use CSS |
| alternativo | <área>, <img>, <entrada> | Em caso de falha na exibição do elemento original, fornece um texto alternativo |
| assíncrono | <script> | A execução assíncrona é configurada (somente para scripts externos) no atributo Html |
| autocompletar | <forma>, <entrada> | Indica se o preenchimento automático deve ser permitido para um <form> ou <input> |
| auto-foco | <botão>, <entrada>, <selecionar>, <área de texto> | Assim que a página carregar, o elemento deve receber o foco imediatamente |
| Reprodução automática | <áudio>, <vídeo> | Fornece que o áudio/vídeo comece a rodar sempre que estiver pronto quando se trata de atributos HTML |
| bgcolor | Não suportado em HTML 5. | Uma cor de fundo é fornecida para um elemento. É melhor usar CSS |
| fronteira | Não suportado em HTML 5. | Determina a largura da borda de um elemento. Faça uso de CSS em vez disso |
| conjunto de caracteres | <meta>, <script> | Esta propriedade indica a codificação de caracteres em atributos Html |
| verificado | <entrada> | Define a pré-seleção de um elemento <input> na página (por exemplo, type=”checkbox” ou type=”radio”) |
| citar | <blockquote>, <del>, <ins>, <q> | Fornece um link que explica a citação, o texto removido ou o texto que foi inserido |
| aula | Atributos Globais | Indica um ou mais nomes de classe para um elemento (aqueles usados em folhas de estilo). |
| cor | Não suportado em HTML 5. | A cor do texto de um elemento é determinada por este atributo. Em vez disso, use CSS quando se trata de atributos HTML |
| cols | <área de texto> | Uma área de texto pode ser determinada por sua largura visível |
| colspan | <td>, <th> | Determina quantas colunas uma célula da tabela deve ter |
| contente | <meta> | Identifica o valor associado ao nome ou atributo http-equiv |
| conteúdo editável | Atributos Globais | A capacidade de edição de um elemento é especificada por esta propriedade |
| controles | <áudio>, <vídeo> | Indica se os controles de áudio/vídeo devem ser exibidos (como botões de reprodução/pausa) |
| coordenadas | <área> | Identifica as coordenadas da área |
| dados | <objeto> | fornece a URL do recurso, que o objeto usará |
| dados-* | Atributos Globais | utilizado para armazenar dados personalizados que só são acessíveis pela página ou aplicativo em atributos Html |
| data hora | <del>, <ins>, <tempo> | Identifica a data e a hora |
| padrão | <pista> | Indica que a faixa deve ser reproduzida se as escolhas do usuário não apontarem para uma faixa diferente como preferível. |
| adiar | <script> | Indica que o script deve ser executado após a conclusão da análise da página (somente para scripts externos) |
| dir | Atributos Globais | Identifica a direção do texto do conteúdo de um elemento em seus atributos HTML |
| dirname | <entrada>, <área de texto> | descreve a submissão da direção do texto |
| desabilitado | <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> |
Indica ao navegador que o elemento ou conjunto de elementos fornecido deve ser desabilitado |
| download | <a>, <área> | garante que, quando um usuário acessar o hiperlink, o destino será baixado |
| arrastável | Atributos Globais | Indica se um elemento é arrastável ou não |
| enctype | <forma> | Ao transmitir dados de formulário para o servidor, isso indica quais dados de formulário precisam ser codificados (somente para method=”post”) |
| para | <rótulo>, <saída> | Identifica o(s) elemento(s) do formulário aos quais um rótulo/cálculo está vinculado |
| forma | <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea> |
Fornece o nome do formulário com o qual o elemento se relaciona |
| formação | <botão>, <entrada> | Fornece um local para os dados do formulário a serem enviados após o envio. Para type=”enviar” exclusivamente |
| cabeçalhos | <td>, <th> | Identifica a conexão de uma célula com uma ou mais células de cabeçalho |
| altura | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | No atributo Html , indique a altura do elemento |
| escondido | Atributos Globais | Indica que um elemento não é mais aplicável ou não é mais aplicável |
| alto | <metro> | Valores percebidos como altos são identificados nessa faixa |
| href | <a>, <área>, <base>, <link> | Fornece a URL do destino do link |
| hreflang | <a>, <área>, <link> | Indique o idioma do documento anexo |
| http-equiv | <meta> | Contém a informação/valor do atributo content em um cabeçalho HTTP |
| eu ia | Atributos Globais | Fornece o id exclusivo de um elemento |
| ismap | <img> | Crie um mapa de imagem do lado do servidor a partir de uma imagem |
| tipo | <pista> | Fornece detalhes sobre o tipo de faixa de texto |
| rótulo | <track>, <opção>, <optgroup> | Fornece informações sobre o título da faixa de texto |
| idioma | Atributos Globais | Define o idioma do conteúdo de um elemento |
| lista | <entrada> | Descreve um elemento <datalist> que contém valores especificados para um elemento <input> |
| laço | <áudio>, <vídeo> | Fornece um reinício do áudio/vídeo após a conclusão do mesmo |
| baixo | <metro> | No atributo Html , identifique o intervalo de valores que são considerados baixos |
| máximo | <entrada>, <medidor>, <progresso> | Fornece o valor máximo |
| comprimento máximo | <entrada>, <área de texto> | Esta propriedade indica o número máximo de caracteres que podem ser inseridos em um elemento |
| meios de comunicação | <a>, <área>, <link>, <fonte>, <estilo> | Indica o tipo de mídia ou dispositivo para o qual o documento vinculado é adequado |
| método | <forma> | Fornece instruções sobre como enviar dados de formulário usando HTTP |
| min | <entrada>, <medidor> | Indica um valor mínimo |
| múltiplo | <entrada>, <selecionar> | Indica que mais de um valor pode ser inserido por um usuário |
| mudo | <vídeo>, <áudio> | Fornece instruções para silenciar a saída de áudio do vídeo |
| nome | <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea> |
Fornece o nome do elemento |
| novalidar | <forma> | Forneça instruções para não validar o formulário após o envio |
| abortar | <áudio>, <embed>, <img>, <objeto>, <vídeo> | Ao abortar, um script deve ser executado |
| na impressão posterior | <corpo> | Depois de imprimir o documento, execute o seguinte script |
| impressão anterior | <corpo> | Antes de imprimir o documento, execute o seguinte script |
| antes de descarregar | <corpo> | Caso o foco seja perdido em um elemento, execute o seguinte script |
| onblur | Todos os elementos visíveis. | Caso o foco seja perdido em um elemento, execute o seguinte script |
| oncanplay | <áudio>, <incorporar>, <objeto>, <vídeo> | Execute o script quando um arquivo estiver pronto para começar a ser reproduzido (quando estiver armazenado em buffer por tempo suficiente) |
| oncanplaythrough | <áudio>, <vídeo> | Executar um script quando um arquivo pode ser reproduzido do início ao fim sem interrupções ou atrasos |
| em mudança | Todos os elementos visíveis. | Script a ser executado quando o valor de um elemento é alterado |
| ao clicar | Todos os elementos visíveis. | Um script que será executado quando o elemento for pressionado |
| no menu de contexto | Todos os elementos visíveis. | Um script que é executado quando um menu de contexto é invocado |
| oncopy | Todos os elementos visíveis. | Script a ser executado sempre que o conteúdo do elemento for copiado |
| na hora da mudança | <pista> | Script a ser executado sempre que uma sugestão mudar em um elemento <track> |
| oncut | Todos os elementos visíveis. | Script a ser executado sempre que o conteúdo do elemento for cortado |
| ondblclick | Todos os elementos visíveis. | Script a ser executado quando o elemento é clicado duas vezes |
| ondrag | Todos os elementos visíveis. | Um script que é executado quando um elemento é arrastado |
| ondrage | Todos os elementos visíveis. | O script deve ser executado após a conclusão de uma operação de arrastar |
| ondragente | Todos os elementos visíveis. | Uma vez que o elemento foi arrastado para a posição de soltar adequada, um script será executado |
| ondragleave | Todos os elementos visíveis. | Quando um elemento for removido de um destino de soltar válido, execute este script |
| ondragover | Todos os elementos visíveis. | Quando um elemento é arrastado sobre um ponto de queda válido, este script será executado |
| ondragstart | Todos os elementos visíveis. | Execute este script no início das operações de arrastar |
| ondrop | Todos os elementos visíveis. | Soltar um elemento arrastado aciona a execução de um script |
| mudança de duração | <áudio>, <vídeo> | Quando o tamanho do arquivo de mídia flutuar, execute o script |
| um esvaziado | <áudio>, <vídeo> | Se o arquivo ficar inacessível por qualquer motivo (por exemplo, desconectado inesperadamente), você deverá executar este script |
| unido | <áudio>, <vídeo> | Script que executa quando a mídia termina (adequado para mensagens como “obrigado pela atenção”) |
| um erro | <audio>, <body>, <embed>, <img>, <object>, <script>, <style>, <video> | Em caso de erro, execute o script |
| No foco | Todos os elementos visíveis. | Quando o elemento fica focado, o script é executado |
| onhashchange | <corpo> | Script a ser executado quando a parte âncora de uma URL for modificada |
| na entrada | Todos os elementos visíveis. | Quando um elemento é inválido, um script deve ser executado |
| oninvalid | Todos os elementos visíveis. | Execute o script sempre que o usuário pressionar uma tecla |
| onkeydown | Todos os elementos visíveis. | Script que deve ser executado quando uma tecla é pressionada nos atributos Html |
| ao pressionar a tecla | Todos os elementos visíveis. | Execute o script caso um usuário libere uma chave em atributos Html |
| onkeyup | Todos os elementos visíveis. | Caso um usuário libere uma chave, um script será executado |
| carregando | <body>, <iframe>, <img>, <input>, <link>, <script>, <estilo> | Script a ser executado após a conclusão da renderização do elemento |
| dados carregados | <áudio>, <vídeo> | Depois de carregar os dados de mídia, execute o script |
| onloadedmetadata | <áudio>, <vídeo> | Quando os metadados (como dimensões e duração) são recuperados, este script é executado |
| onloadstart | <áudio>, <vídeo> | Antes de qualquer coisa ser processada, execute este script assim que o arquivo começar a carregar |
| ao passar o mouse | Todos os elementos visíveis. | Sempre que um botão do mouse é pressionado em um elemento, um script é executado |
| ao mover o mouse | Todos os elementos visíveis. | O script continuará a ser executado enquanto o cursor do mouse estiver girando sobre um elemento |
| onmouseout | Todos os elementos visíveis. | Sempre que o cursor do mouse sai de um elemento, este script é executado |
| ao passar o mouse | Todos os elementos visíveis. | Sempre que o cursor do mouse passar por cima de um elemento, o script será executado |
| passar o mouse | Todos os elementos visíveis. | Sempre que um botão do mouse é pressionado sobre um elemento, o script é invocado |
| na roda do mouse | Todos os elementos visíveis. | script que seria executado se a roda do mouse fosse movida sobre um elemento |
| onoffline | <corpo> | O script seria executado sempre que o navegador começasse a fornecer serviço offline |
| online | <corpo> | O script seria executado sempre que o navegador começasse a funcionar online |
| onpagehide | <corpo> | O script seria executado sempre que o navegador começasse a funcionar online |
| na página mostrar | <corpo> | Sempre que um usuário navega em uma página, esse script é executado |
| colar | Todos os elementos visíveis. | Se um usuário inserir alguma informação em um elemento, um script será executado |
| em pausa | <áudio>, <vídeo> | Se o usuário ou computador pausar a mídia, este script será executado |
| em jogo | <áudio>, <vídeo> | Depois que a mídia começar a ser reproduzida, execute o script |
| jogando | <áudio>, <vídeo> | O script deve ser executado assim que a mídia começar a tocar |
| onpopstate | <corpo> | Se o histórico de uma janela for alterado, execute este script. |
| em progresso | <áudio>, <vídeo> | script a ser executado enquanto o navegador está adquirindo os dados de mídia em atributos Html |
| na mudança de taxa | <áudio>, <vídeo> | Sempre que a taxa de reprodução flutuar, execute este script. (por exemplo, quando um usuário muda para câmera lenta ou modo de avanço rápido) |
| inicializar | <forma> | Escolher a opção de redefinição em um formulário executará este script |
| onresize | <corpo> | sempre que a dimensão da janela do navegador muda o script a ser executado |
| na rolagem | Todos os elementos visíveis. | No momento em que a barra de rolagem de um elemento é rolada, este script será executado |
| pesquisando | <entrada> | Sempre que o usuário digitar algo em uma caixa de pesquisa (por exemplo, input=”search”), este script será executado |
| procurado | <áudio>, <vídeo> | No script de final de busca a ser executado quando o atributo de busca for igual a false |
| procurando | <áudio>, <vídeo> | Quando o atributo de busca for definido como verdadeiro, o que significa que a busca está ativada, o script será executado |
| ao selecionar | Todos os elementos visíveis. | Sempre que um elemento for escolhido, execute o script |
| instalado | <áudio>, <vídeo> | Caso o navegador não consiga obter os dados de mídia por um motivo desconhecido, execute este script |
| armazenamento | <corpo> | Sempre que uma área de armazenamento da Web for atualizada, execute este script |
| ao enviar | <forma> | Sempre que um formulário for carregado, execute este script |
| suspender | <áudio>, <vídeo> | Caso a busca dos dados de mídia seja interrompida antes de ser carregada com sucesso, execute este script |
| ontimeupdate | <áudio>, <vídeo> | Script de posição de reprodução para executar quando ele mudou sua posição. (por exemplo, quando um usuário avança rapidamente para outro ponto em um vídeo) |
| alternar | <detalhes> | Um script de abertura e fechamento que é executado quando o usuário escolhe o elemento <details> |
| ao descarregar | <corpo> | Depois que uma página terminar de carregar (ou a janela do navegador for fechada), execute o seguinte script |
| na mudança de volume | <áudio>, <vídeo> | Um script de ajuste de volume de áudio/vídeo deve ser executado toda vez que o volume for ajustado |
| esperando | <áudio>, <vídeo> | Sempre que a mídia parar, mas for provável que reinicie (por exemplo, quando armazenar mais dados em buffer), execute este script |
| roda | Todos os elementos visíveis. | O movimento da roda do mouse sobre um elemento executará o script |
| abrir | <detalhes> | Prevê que o usuário deve ter acesso aos detalhes (aberto) |
| ótimo | <metro> | Indique qual valor é apropriado para o medidor |
| padrão | <entrada> | A expressão regular com a qual o valor de um elemento <input> deve ser validado em atributos Html |
| espaço reservado | <entrada>, <área de texto> | Fornece uma breve visão geral do valor esperado do elemento |
| poster | <vídeo> | Uma imagem personalizada será exibida durante o processo de download ou até que o usuário pressione o botão play |
| pré-carga | <áudio>, <vídeo> | Descreva como e se o autor acredita que o áudio/vídeo deve ser carregado no carregamento da página |
| somente leitura | <entrada>, <área de texto> | Este elemento declara que é somente leitura |
| rele | <a>, <área>, <formulário>, <link> |
Indica como o documento atual está conectado ao documento associado |
| obrigatório | <entrada>, <selecionar>, <área de texto> | Pré-requisito para submissão do formulário é o preenchimento deste elemento |
| invertido | <ol> | Indica que a ordem da lista deve ser decrescente (9,8,7…) |
| linhas | <área de texto> | Indica quantas linhas devem ser exibidas em uma área de texto |
| Expansão de linha | <td>, <th> | Fornece o número de linhas que serão incluídas em uma célula da tabela |
| caixa de areia | <iframe> | Permite limitações adicionais para o conteúdo de um <iframes> |
| escopo | <th> | A célula do cabeçalho indica se é o cabeçalho de uma coluna, linha ou grupo de colunas ou linhas |
| selecionado | <opção> | Indica que assim que uma página carregar, uma opção deve ser pré-selecionada |
| forma | <área> | Fornece informações sobre a forma da área |
| tamanho | <entrada>, <selecionar> | Para <input>, indique a largura em caracteres, ou para <selects>, indique quantas opções são mostradas |
| tamanhos | <img>, <link>, <fonte> |
Esta propriedade indica o tamanho do recurso vinculado |
| período | <col>, <colgroup> | Indica quantas colunas devem ser estendidas |
| verificação ortográfica | Atributos Globais | Isso indica se o elemento deve ser examinado quanto à ortografia e gramática |
| origem | <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> |
Fornece a URL do arquivo de mídia nos atributos HTML |
| srcdoc | <iframe> | Indica qual conteúdo da página HTML deve aparecer no <iframe> |
| srclang | <pista> | (If kind=”subtitles”) Indique o idioma dos dados do texto da faixa |
| conjunto de origem | <img>, <fonte> | Fornece um URL para uma imagem específica a ser usada em diferentes circunstâncias |
| começar | <ol> | Define o valor inicial dos atributos HTML em uma lista ordenada |
| etapa | <entrada> | Para um campo de entrada, indique os intervalos de números legais |
| estilo | Atributos Globais | Fornece um elemento com um estilo CSS embutido |
| tabindex | Atributos Globais | Indica a ordem em que os elementos devem ser tabulados |
| alvo | <a>, <área>, <base>, <forma> | Indica onde deve ser aberto o documento anexo ou onde deve ser enviado o formulário |
| título | Atributos Globais | Fornece detalhes adicionais sobre um elemento |
| traduzir | Atributos Globais | Determinar se o conteúdo de um elemento deve ou não ser traduzido |
| tipo | <a>, <botão>, <incorporar>, <entrada>, <link>, <menu>, <objeto>, <script>, <fonte>, <estilo> |
Fornece informações sobre o tipo de elemento em atributos HTML |
| mapa de uso | <img>, <objeto> | Auxilia no fornecimento de uma imagem como um mapa de imagens do lado do cliente |
| valor | <botão>, <entrada>, <li>, <opção>, <medidor>, <progresso>, <param> |
O valor de um elemento está contido no atributo |
| largura | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | A largura do elemento é fornecida nos atributos Html |
| enrolar | <área de texto> | Quando o usuário enviar um formulário, indique como o texto deve ser agrupado |
Vantagens dos Atributos HTML
Os atributos em Html são usados para fornecer informações adicionais sobre um elemento HTML. Aqui estão algumas vantagens de usar atributos HTML :
- Os atributos HTML fornecem benefícios de acessibilidade, permitindo que os desenvolvedores da Web adicionem atributos que as tecnologias assistivas podem usar para tornar o conteúdo da Web mais acessível para pessoas com deficiências.
- Ao usar determinados atributos, como o atributo “alt” para imagens, você pode ajudar os mecanismos de pesquisa a entender o conteúdo da sua página da Web, o que pode melhorar a classificação do mecanismo de pesquisa.
- O uso de atributos ajuda a garantir a consistência em diferentes páginas da Web, permitindo definir certas características de um elemento em um local e reutilizá-las em várias páginas.
- Os atributos podem ser usados para estilizar elementos e fornecer dicas visuais aos usuários sobre o significado do conteúdo.
- Certos atributos, como “ href ” para links e “ src ” para imagens, fornecem funcionalidade que permite aos usuários interagir e navegar por suas páginas da web.
- O uso de determinados atributos, como atributos “aria-”, pode ajudar a garantir que suas páginas da Web estejam em conformidade com os padrões de acessibilidade.
Se esta postagem de alguma forma atendeu às suas necessidades educacionais, compartilhe esses úteis atributos Html com seus amigos clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
