Atributos HTML

Os atributos HTML podem ser ditos como palavras especiais que são usadas nas tags de abertura e são responsáveis ​​por controlar o comportamento de um elemento. Eles são um modificador do tipo de elemento HTML. Este modificador pode fazer dois trabalhos. Ele pode modificar a funcionalidade padrão de um elemento ou pode fornecer a funcionalidade a qualquer elemento que não possa funcionar corretamente sem eles. Sintaticamente, um atributo é adicionado à tag de início do HTML. Existem diferentes tipos de atributos que foram identificados. Isso inclui os atributos necessários, atributos opcionais, atributos padrão e atributos de eventos. Atributos necessários são aqueles que são necessários por um tipo de elemento específico, para que a função funcione corretamente. O atributo opcional pode ser usado para modificar a funcionalidade padrão de um tipo de elemento. Os atributos padrão são suportados por um grande número de tipos de elementos e os atributos de eventos podem ser usados ​​para causar tipos de elementos que podem especificar os scripts que são executados sob circunstâncias específicas. Os atributos geralmente aparecem como pares nome-valor e são separados por '=' (sinal de igual). Eles são gravados na tag de início de um elemento após o nome do elemento.

Atributos HTML diferentes

Vamos dar uma olhada em diferentes atributos HTML e como eles funcionam em detalhes.

Atributos principais

Existem quatro atributos principais usados ​​principalmente. Para nomeá-los, são os seguintes:

  • ID: esse atributo do HTML pode ser facilmente usado para identificar exclusivamente um elemento que está presente em uma página HTML. O ID do usuário pode ser usado quando um elemento carrega um atributo de ID como um identificador exclusivo, o que torna possível identificar o elemento e seu conteúdo ou é usado quando existem dois elementos com o mesmo nome em uma página da web. O atributo ID pode ajudar a identificar facilmente a diferença entre os elementos que têm o mesmo nome.
  • O atributo Title: esse atributo faz o trabalho de fornecer um título sugerido para um elemento específico. Depende da transportadora como ele se comportará e, embora normalmente não seja exibido como uma dica de ferramenta sempre que o cursor passa sobre o elemento ou se é necessário exibi-lo quando o elemento está carregando. Também é usado para explicar um elemento ao passar o mouse sobre ele. O comportamento pode diferir com diferentes elementos e, geralmente, seu valor é exibido ao carregar ou ao passar o cursor do mouse sobre ele.
  • O atributo Class: A associação deste atributo é feita com um elemento da folha de estilos. O usuário precisa especificar a classe do elemento. Pode-se aprender mais sobre esse atributo quando a folha Estilo em cascata está sendo aprendida. O valor aqui também pode ser uma lista separada por espaços de nomes de classe. Por exemplo: class = "className1 className2 className3"
  • O atributo de estilo: esse atributo permite especificar as regras da folha de estilos em cascata em qualquer elemento. Ele pode fornecer vários efeitos de folha de estilo em cascata aos elementos HTML, como aumentar o tamanho da fonte. Também pode alterar a família e a cor da fonte.

Após os atributos principais, temos alguns atributos de internacionalização. Eles são os seguintes:

Atributo de Internacionalização

  • Dir: O atributo dir ajuda você a indicar ao navegador a direção na qual um texto deve seguir. Esse atributo geralmente pode ocupar dois valores. Estes podem ser LTR e RTL. LTR significa da esquerda para a direita e esse é o valor padrão, enquanto RTL representa da direita para a esquerda. Quando esse atributo é usado na tag, ele determina como um texto deve ser representado em todo o documento. Também pode ser usado para controlar a direção do texto apenas do conteúdo da tag.
  • O atributo Lang: esse atributo ajuda a mostrar o idioma principal usado em um documento. Este atributo pode ser mantido em HTML para que seja compatível com versões anteriores de versões anteriores. Também pode ser substituído pelo atributo XML: lang em novos documentos XHTML. Os valores dos atributos lang são padrão ISO-639 e possuem códigos de idioma de dois caracteres. É importante declarar um idioma para acessar o aplicativo e diferentes mecanismos de pesquisa.
  • O atributo XML-Lang: este atributo deve substituir o atributo lang. O valor do atributo XML-lang deve ter o código do país conforme mencionado anteriormente.

Além desses, há muitos atributos genéricos que são descritos abaixo.

Atributo genérico

  • Alinhar atributo: esse atributo é útil quando você deseja ter alguns elementos da sua página à sua disposição. Você pode alterar o alinhamento para a esquerda, direita ou o centro da página. O alinhamento padrão para todos os elementos é definido para a esquerda. Isso pode ser alterado usando esse atributo de alinhamento.
  • Atributo Src: se um usuário precisar inserir uma imagem em uma página da Web, precisamos usar o tag com o atributo src. Podemos especificar o endereço da imagem como o valor do atributo dentro da aspas duplas. Você pode usar o atributo src como abaixo para incluir a imagem na página da web.


src Attribute


  • Atributo Alt: Este atributo é usado como uma tag alternativa, que pode ser usada para mostrar algo se o atributo principal que é o tag que falha ao exibir o valor original atribuído a ele. Isso pode descrever a imagem para um desenvolvedor que a está usando no final da codificação. Se a imagem principal falhar, a imagem alternativa poderá ser usada para exibição.
  • O atributo Largura e altura: esse atributo pode ser usado para ajustar a altura e a largura de uma imagem.

Example:

Width and Height


<

  • O atributo Href: esse atributo é usado quando o usuário deseja direcionar para um link específico para qualquer endereço. Este atributo é usado junto com a tag. Quando o link é colocado no atributo href para onde deve ser direcionado, ele é vinculado ao texto exibido na tag. Quando o usuário clica nesse texto, ele será redirecionado para o endereço do link. A opção padrão para abrir esta página na mesma guia. Se você usar o atributo de destino, poderá definir seu valor como _blank. Isso será redirecionado para outra guia ou outra janela com base na configuração do seu navegador.

Atributo de dados

O HTML também fornece atributos de dados personalizados que ajudam a adicionar informações relacionadas a você nas tags HTML. Eles não são específicos para HTML5 e podem ser usados ​​em todos os elementos HTML. O atributo data - * nos ajuda a personalizar nossos próprios atributos de dados personalizados, ele pode armazenar os dados em particular na página ou no aplicativo.

Para personalizar, os dados são divididos em duas partes:

  1. Nome do atributo: deve ter pelo menos um caractere e não deve conter letras maiúsculas. Esse nome também pode ser prefixado usando 'data-'.
  2. Valor do atributo: o valor para um atributo pode ser qualquer sequência.

A sintaxe para o atributo data é como:

  • Gitanjali

    • Propriedade de atributo DOM

    Para obter os objetos NamedNodeMap, as propriedades do atributo no HTML DOM devem ser usadas. Ele retornará o grupo de atributos do nó. O NamedNodeMap também representa a coleção de objetos de atributo e pode ser acessado pelo número do índice. Esse número de índice começa em 0.

    A sintaxe para usar isso é: node.attributes

    O valor retornado são os objetos NamedNodeMap que estão presentes na coleção de nós. Se o usuário estiver usando o Internet Explorer 8 ou qualquer uma das versões anteriores, a propriedade attribute retornará todos os atributos possíveis para qualquer elemento e isso poderá resultar em mais valores do que o esperado.

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Atributos globais

    O HTML também fornece atributos globais que podem ser usados ​​com qualquer elemento HTML. Os atributos são os seguintes.

    • Tecla de acesso: especifica uma tecla de atalho para ativar ou focar em qualquer elemento.
    • Traduzir: se esse atributo for usado, ele especifica se o conteúdo do elemento deve ser traduzido ou não.
    • Classe: especifica um ou mais nomes de classe para um elemento.
    • Título: Este atributo especifica informações extras sobre um elemento.
    • Conteúdo editável : para especificar se o conteúdo é editável ou não, este atributo pode ser usado.
    • Tabindex: especifica a ordem de tabulação de um elemento.
    • Dir: especifica a direção do texto para qualquer conteúdo de um elemento.
    • Verificação ortográfica: o usuário pode especificar explicitamente se precisa verificar a ortografia e gramática verificadas ou não.
    • Arrastável: especifica se um elemento deve ser arrastável ou não.
    • Dropzone: especifica se os dados arrastados são copiados, movidos ou vinculados quando descartados.

    Atributos do evento

    O HTML tem a capacidade de acionar ações quando alguns eventos ocorrem. Os atributos do evento podem ser os seguintes.

    Onload: é acionado após o carregamento da página.

    Mensagem: Pode ser dito como um script que é executado quando a mensagem é acionada.

    Armazenamento: Este é um script a ser executado quando uma área de armazenamento na web é atualizada.

    Onerror: este script é executado quando ocorre um erro.

    Ocultar na página: esse script pode ser usado quando um usuário pode navegar para fora de uma página.

    Atributos de evento de formulário

    Esses eventos são acionados por ações dentro de um formulário HTML.

    Onblur: É acionado assim que o elemento perde o foco.

    Onchange: é acionado assim que o valor de um elemento é alterado.

    Oncontextmenu: É executado quando um menu de contexto é acionado.

    Foco: É acionado assim que o elemento obtém o foco.

    Oninput: o script deve ser executado quando o elemento receber uma entrada.

    Pesquisa: É acionado quando o usuário escreve algo no campo de pesquisa.

    Oninvalid: é acionado quando um elemento inserido é inválido.

    Atributos do evento principal

    Onkeydown: É acionado quando uma tecla está sendo pressionada.

    onkeypress: É acionado quando uma tecla é pressionada.

    Onkeyup: é acionado quando um usuário libera uma chave.

    Atributos de evento do mouse

    Onclick: Isso é acionado quando o mouse clica em um elemento.

    Onmousemove: é acionado quando o ponteiro do mouse está em movimento enquanto está sobre um elemento.

    Onmouseip: é acionado quando um botão do mouse é liberado sobre um elemento.

    Onwheel: é acionado quando a roda do mouse rola para cima ou para baixo sobre um elemento

    Arrastar atributos do evento

    Ondrag: Isso é acionado quando um elemento é arrastado.

    Ondragleave: o script é executado quando um elemento deixa um destino de descarte válido.

    Ondrop: É acionado quando o elemento arrastado está sendo descartado

    Onscroll: o script é executado quando a barra de rolagem de um elemento está sendo rolada.

    Conclusão - Atributos HTML

    HTML é a tecnologia mais antiga que está sendo usada para criar diferentes aplicativos da web. Com o tempo, o HTML evoluiu gradualmente e fornece muitos recursos para os elementos presentes. Ele fornece uma ampla variedade de atributos que ajudam a tornar o aplicativo mais eficaz. Isso inclui os principais atributos, que são os básicos, usados ​​com mais frequência. Ele também fornece atributos de internacionalização que permitem alterações de idiomas. O atributo data ajuda a armazenar dados e personalizá-los da maneira que o usuário deseja. Com tudo isso, ele também possui atributos globais que podem ser usados ​​com qualquer elemento e em qualquer lugar. Ele também possui atributos de evento que são acionados quando qualquer tipo de evento ocorre. Como resultado, torna o aplicativo ou a página da Web muito interativo. O HTML, portanto, mostra-se ainda no jogo de desenvolvimento de aplicativos da Web devido a todos esses recursos. Com isso, o atributo style que pode ser usado com CSS o torna mais bonito e atraente. Portanto, faça uso de todos os atributos presentes e tenha um aplicativo da Web de sua escolha da maneira mais fácil.

    Artigos recomendados

    Este foi um guia para os atributos HTML. Aqui discutimos os conceitos e os diferentes atributos do HTML. Você também pode consultar os seguintes artigos para saber mais -

    1. O que é HTML em termos simples?
    2. Aprenda como o HTML funciona
    3. O que é XML?
    4. Principais estilos de lista HTML
    5. Comparações de HTML vs XML

    Categoria:

    Ferramentas de Desenvolvimento Web