Attributi HTML

Gli attributi HTML possono essere detti come parole speciali che vengono utilizzate all'interno dei tag di apertura e sono responsabili del controllo del comportamento di un elemento. Sono un modificatore del tipo di elemento HTML. Questo modificatore può fare due lavori. Può modificare la funzionalità predefinita di un elemento o può fornire la funzionalità a qualsiasi elemento che non sia in grado di funzionare correttamente senza di essi. Sintatticamente, un attributo viene aggiunto al tag di inizio HTML. Esistono diversi tipi di attributi che sono stati identificati. Questi includono gli attributi richiesti, gli attributi opzionali, gli attributi standard e gli attributi dell'evento. Gli attributi richiesti sono quelli necessari per un particolare tipo di elemento in modo che la funzione funzioni correttamente. L'attributo facoltativo può essere utilizzato per modificare la funzionalità predefinita di un tipo di elemento. Gli attributi standard sono supportati da un gran numero di tipi di elementi e gli attributi di evento possono essere utilizzati per causare tipi di elementi in grado di specificare gli script che vengono eseguiti in circostanze specifiche. Gli attributi di solito appaiono come coppie nome-valore e sono separati da '=' (segno di uguale). Sono scritti nel tag iniziale di un elemento dopo il nome dell'elemento.

Diversi attributi HTML

Diamo un'occhiata a diversi attributi HTML e al loro funzionamento in dettaglio.

Attributi principali

Esistono quattro attributi principali utilizzati principalmente. Per nominarli sono i seguenti:

  • ID: questo attributo di HTML può essere facilmente utilizzato per identificare in modo univoco un elemento presente in una pagina HTML. L'id utente può essere utilizzato quando un elemento porta un attributo id come identificatore univoco, il che consente di identificare l'elemento e il suo contenuto o questo viene utilizzato quando ci sono due elementi che hanno lo stesso nome all'interno di una pagina Web. L'attributo ID può aiutare a identificare facilmente la differenza tra gli elementi che hanno lo stesso nome.
  • L'attributo del titolo: questo attributo fa il lavoro di dare un titolo suggerito per un particolare elemento. Dipende dal corriere come si comporterà e anche se di solito non viene visualizzato come descrizione comandi ogni volta che il cursore si posiziona sull'elemento o se deve visualizzarlo durante il caricamento dell'elemento. Viene anche usato per spiegare un elemento quando ci si passa sopra con il mouse. Il comportamento può differire con elementi diversi e in generale, il suo valore viene visualizzato al caricamento o al passaggio del mouse su di esso.
  • L'attributo di classe: l'associazione di questo attributo viene eseguita con un elemento del foglio di stile. L'utente deve specificare la classe dell'elemento. Maggiori informazioni su questo attributo possono essere apprese durante l'apprendimento del foglio di stile a cascata. Il valore qui può anche essere un elenco separato da spazi di nomi di classi. Ad esempio: class = "className1 className2 className3"
  • L'attributo di stile: questo attributo consente di specificare le regole del foglio di stile a cascata all'interno di qualsiasi elemento. Può fornire vari elementi del foglio di stile a cascata agli elementi HTML come aumentare la dimensione del carattere. Può anche cambiare la famiglia di caratteri e la colorazione.

Dopo gli attributi di base, abbiamo alcuni attributi di internazionalizzazione. Sono come di seguito:

Attributo di internazionalizzazione

  • Dir: l'attributo dir ti aiuta a indicare al browser la direzione in cui dovrebbe seguire un testo. Questo attributo può in genere assumere due valori. Questi possono essere LTR e RTL. LTR significa da sinistra a destra e questo è il valore predefinito, mentre RTL sta per destra a sinistra. Quando questo attributo viene utilizzato all'interno del tag, determina come deve essere rappresentato un testo nell'intero documento. Può anche essere usato per controllare la direzione del testo solo dal contenuto del tag.
  • L'attributo Lang: questo attributo aiuta a mostrare la lingua principale utilizzata in un documento. Questo attributo può essere mantenuto in HTML in modo che sia compatibile con le versioni precedenti di HTML. Può anche essere sostituito dall'attributo XML: lang nei nuovi documenti XHTML. I valori degli attributi lang sono standard ISO-639 e hanno codici lingua a due caratteri. Dichiarare una lingua è importante per accedere all'applicazione e ai diversi motori di ricerca.
  • L'attributo XML-Lang: questo attributo dovrebbe essere il sostituto dell'attributo lang. Il valore dell'attributo XML-lang deve avere il codice paese come menzionato in precedenza.

Oltre a questi, ci sono molti attributi generici che sono descritti di seguito.

Attributo generico

  • Allinea attributo: questo attributo è utile quando desideri avere alcuni elementi della tua pagina a tua disposizione. È possibile modificare l'allineamento a sinistra, a destra o al centro della pagina. L'allineamento predefinito per tutti gli elementi è impostato a sinistra. Questo può essere modificato usando questo attributo align.
  • Attributo Src: se un utente deve inserire un'immagine in una pagina Web, allora dobbiamo usare il tag con l'attributo src. Possiamo specificare l'indirizzo dell'immagine come valore dell'attributo all'interno della doppia virgoletta. È possibile utilizzare l'attributo src come di seguito per includere l'immagine nella pagina Web.


src Attribute


  • Alt Attribute: questo attributo è usato come tag alternativo che può essere usato per mostrare qualcosa se l'attributo primario è il tag che non riesce a visualizzare il valore originale che gli è stato assegnato. Questo può descrivere l'immagine a uno sviluppatore che la sta usando alla fine della codifica. Se l'immagine principale non riesce, è possibile utilizzare l'immagine alternativa per la visualizzazione.
  • Attributo Larghezza e Altezza: questo attributo può essere usato per regolare l'altezza e la larghezza di un'immagine.

Example:

Width and Height


<

  • L'attributo Href: questo attributo viene utilizzato quando l'utente desidera indirizzare a un collegamento specifico a qualsiasi indirizzo. Questo attributo viene utilizzato insieme al tag. Quando il collegamento viene inserito nell'attributo href in cui deve essere diretto, viene collegato al testo visualizzato all'interno del tag. Quando l'utente fa clic su questo testo, l'utente verrà reindirizzato all'indirizzo del collegamento. L'opzione predefinita per aprire questa pagina nella stessa scheda. Se si utilizza l'attributo target, è possibile impostarne il valore su _blank. Questo reindirizzerà a un'altra scheda o un'altra finestra in base alla configurazione del browser.

Attributo dei dati

HTML fornisce anche attributi di dati personalizzati che ti aiutano ad aggiungere informazioni relative a te nei tag HTML. Questi non sono specifici di HTML5 e possono essere utilizzati su tutti gli elementi HTML. L'attributo data - * ci aiuta a personalizzare i nostri attributi di dati personalizzati, può memorizzare i dati privatamente nella pagina o nell'applicazione.

Per personalizzare, i dati sono divisi in due parti:

  1. Nome attributo: deve contenere almeno un carattere e non deve contenere maiuscole. Questo nome può anche essere prefissato usando 'data-'.
  2. Valore attributo: il valore per un attributo può essere qualsiasi stringa.

La sintassi per l'attributo di dati è la seguente:

  • Gitanjali

    • Proprietà di attributo DOM

    Per ottenere gli oggetti NamedNodeMap è necessario utilizzare le proprietà degli attributi nel DOM HTML. Restituirà il gruppo di attributi del nodo. NamedNodeMap rappresenta anche la raccolta di oggetti attributo ed è possibile accedervi per numero indice. Questo numero indice inizia da 0.

    La sintassi per usare questo è: node.attributes

    Il valore che viene restituito è gli oggetti NamedNodeMap che sono presenti nella raccolta di nodi. Se l'utente utilizza Internet Explorer 8 o una delle versioni precedenti, la proprietà attributi restituirà tutti gli attributi possibili per qualsiasi elemento e ciò può comportare più valori del previsto.

    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

    Attributi globali

    HTML fornisce anche attributi globali che possono essere utilizzati con qualsiasi elemento HTML. Gli attributi sono i seguenti.

    • Accesskey: specifica un tasto di scelta rapida per attivare o focalizzare su qualsiasi elemento.
    • Traduci: se questo attributo viene utilizzato, specifica se il contenuto dell'elemento deve essere tradotto o meno.
    • Classe: specifica uno o più nomi di classe per un elemento.
    • Titolo: questo attributo specifica ulteriori informazioni su un elemento.
    • Contenteditable: per specificare se il contenuto è modificabile o meno, è possibile utilizzare questo attributo.
    • Tabindex: specifica l'ordine di tabulazione di un elemento.
    • Dir: specifica la direzione del testo per qualsiasi contenuto di un elemento.
    • Controllo ortografico: l' utente può specificare esplicitamente se deve controllare l'ortografia e la grammatica verificate o meno.
    • Trascinabile: specifica se un elemento deve essere trascinabile o meno.
    • Dropzone: specifica se i dati trascinati vengono copiati, spostati o collegati quando rilasciati.

    Attributi dell'evento

    L'HTML ha la capacità di innescare azioni quando si verificano alcuni eventi. Gli attributi dell'evento possono essere come di seguito.

    Onload: si attiva al termine del caricamento della pagina.

    Onmessage: questo può essere detto come uno script che viene eseguito quando viene attivato il messaggio.

    Onstorage: questo è uno script da eseguire quando viene aggiornata un'area di archiviazione web.

    Onerror: questo script viene eseguito quando si verifica un errore.

    Onpagehide: questo script può essere utilizzato quando un utente può uscire da una pagina.

    Attributi dell'evento modulo

    Questi eventi sono attivati ​​da azioni all'interno di un modulo HTML.

    Onblur: viene attivato non appena l'elemento perde la messa a fuoco.

    Onchange: viene attivato non appena il valore di un elemento cambia.

    Oncontextmenu: viene eseguito quando viene attivato un menu di scelta rapida.

    Onfocus: viene attivato non appena l'elemento viene messo a fuoco.

    Oninput: lo script deve essere eseguito quando l'elemento riceve un input.

    Onsearch: viene attivato quando l'utente scrive qualcosa nel campo di ricerca.

    Oninvalid: viene attivato quando un elemento inserito non è valido.

    Attributi dell'evento chiave

    Onkeydown: viene attivato quando viene premuto un tasto.

    onkeypress: viene attivato quando viene premuto un tasto.

    Onkeyup: viene attivato quando un utente rilascia una chiave.

    Attributi dell'evento del mouse

    Onclick: viene attivato quando il mouse fa clic su un elemento.

    Onmousemove: viene attivato quando il puntatore del mouse si sposta mentre si trova su un elemento.

    Onmouseip: viene attivato quando un pulsante del mouse viene rilasciato da un elemento.

    Onwheel: viene attivato quando la rotellina del mouse si sposta su o giù su un elemento

    Trascina gli attributi dell'evento

    Ondrag: viene attivato quando viene trascinato un elemento.

    Ondragleave: lo script viene eseguito quando un elemento lascia una destinazione di rilascio valida.

    Ondrop: viene attivato quando viene trascinato l'elemento trascinato

    Onscroll: lo script viene eseguito quando si scorre la barra di scorrimento di un elemento.

    Conclusione - Attributi HTML

    HTML è la tecnologia più antica utilizzata per creare diverse applicazioni Web. Con il tempo, l'HTML si è evoluto gradualmente e offre molte funzionalità per gli elementi presenti. Fornisce un'ampia varietà di attributi che aiutano a rendere l'applicazione più efficace. Questi includono attributi di base che sono quelli di base utilizzati più frequentemente. Fornisce inoltre attributi di internazionalizzazione che consentono le modifiche alle lingue. L'attributo data aiuta a archiviare i dati e personalizzarli come desidera l'utente. Con tutti questi, ha anche attributi globali che possono essere utilizzati con qualsiasi elemento e ovunque. Ha anche attributi Event che vengono attivati ​​quando si verifica qualsiasi tipo di evento. Di conseguenza, rende l'applicazione Web o la pagina Web molto interattiva. L'HTML si rivela quindi ancora nel gioco dello sviluppo di applicazioni web grazie a tutte queste funzionalità. Con questi, l'attributo di stile che può essere usato con i CSS lo rende più bello e attraente da usare. Quindi usa tutti gli attributi presenti e disponi di una fantastica applicazione web a tua scelta nel modo più semplice.

    Articoli consigliati

    Questa è stata una guida agli attributi HTML. Qui abbiamo discusso i concetti e i diversi attributi di HTML. Puoi anche consultare i seguenti articoli per saperne di più -

    1. Che cos'è l'HTML in termini semplici?
    2. Scopri come funziona HTML
    3. Che cos'è XML?
    4. Principali stili di elenco HTML
    5. Confronti tra HTML e XML

    Categoria:

    Strumenti di sviluppo Web