Come creare tag personalizzati per HTML

Come creare tag personalizzati per HTML
Diversi tag in HTML possono essere utilizzati per vari scopi, come ""Per fare pulsanti e""Per aggiungere immagini nei documenti HTML. HTML consente inoltre agli sviluppatori Web di creare tag personalizzati o indipendenti. Tuttavia, ci sono poche restrizioni alla creazione di un tag personalizzato valido. Il tag personalizzato deve avere un'apertura e un tag di chiusura. Inoltre, i tag personalizzati autocostenuti non sono validi in HTML.

Questo articolo dimostrerà:

  • Quali sono i tag personalizzati per HTML?
  • Quali sono le regole di denominazione per i tag personalizzati?
  • Esempi per tag personalizzati validi e non validi
  • Come creare tag personalizzati per HTML?

Quali sono i tag personalizzati per HTML?

Gli attributi personalizzati sono progettati specificamente da sviluppatori o utenti e non sono inclusi negli elementi HTML5 standard. I tag personalizzati specificano contenuti aggiuntivi o personali nei tag definiti dall'utente. Questi tag funzionano in modo simile ai tag integrati HTML. Inoltre, per specificare il tag personalizzato nel documento HTML, gli utenti devono seguire le regole di denominazione.

Quali sono le regole di denominazione per i tag personalizzati?

Esistono varie regole di denominazione definite per la creazione del tag personalizzato. Alcuni di essi sono elencati di seguito:

  • Un tag personalizzato inizia sempre con una piccola lettera.
  • Gli utenti possono aggiungere valori numerici da (1 a 9) nel tag personalizzato.
  • Almeno un trattino (-) deve essere aggiunto al tag personalizzato.
  • Gli utenti non possono inserire la lettera di capitale in un tag personalizzato.
  • Gli utenti possono anche utilizzare qualsiasi tipo di emoji nel tag personalizzato.
  • Gli utenti non possono creare tag personalizzati autoportanti o in linea nell'HTML.

Esempi per tag personalizzati validi e non validi
La tabella seguente mostra esempi relativi ai tag personalizzati validi e non validi:

Tag personalizzati validi Tag personalizzati non validi

Come creare tag personalizzati per HTML?

Per creare tag personalizzati in HTML, passare attraverso le istruzioni di seguito.

Passaggio 1: creare tag personalizzato
Innanzitutto, crea un tag personalizzato seguendo le regole di denominazione. Ad esempio, abbiamo creato l'elemento "" in HTML. Quindi, aggiungi il testo tra i tag personalizzati.

Passaggio 2: Crea pulsante
Crea un pulsante con l'aiuto di ""All'interno del tag personalizzato:


Questo contenitore è stato creato da me.



Qui, puoi vedere che il tag personalizzato è stato creato correttamente e visualizza anche l'elemento pulsante:

Passaggio 3: elemento personalizzato in stile
Gli utenti possono anche modellare il contenitore personalizzato accedendolo in CSS utilizzando il nome tag pertinente. Ad esempio, abbiamo avuto accesso al contenitore personalizzato utilizzando il tag creato "My-tag". Successivamente, applicare le proprietà sotto codifica sul tag personalizzato:

my-tag
blocco di visualizzazione;
bordo: 4px verde solido;
Margine: 30px 15px;
imbottitura: 30px;
Background-color: RGB (238, 181, 96);

Qui:

  • "Schermo"La proprietà viene utilizzata per specificare come visualizzare un elemento. Il display è impostato come "bloccare"Per visualizzare l'elemento in una nuova riga.
  • "confine"Viene utilizzato per definire un limite attorno all'elemento.
  • "margine"Assegna uno spazio attorno al limite dell'elemento.
  • "imbottitura"Definisce uno spazio all'interno del limite di un elemento.
  • "colore di sfondo"È utilizzato per specificare il colore sul retro dell'elemento.

Produzione

Si può osservare che abbiamo creato e disegnato efficacemente l'elemento o il tag personalizzato.

Conclusione

Per creare un tag personalizzato, gli utenti sono limitati seguendo le regole di denominazione. Per creare un tag personalizzato, in primo luogo, specificare il tag secondo regole come " Alcuni contenuti ". Quindi, accedi al tag in CSS utilizzando il nome del tag e applica le proprietà CSS per lo styling. Questo tutorial ti ha insegnato il metodo più semplice per creare un tag personalizzato per HTML.