Como criar tags personalizadas para html

Várias tags no HTML podem ser usadas para vários propósitos, como “"Para fazer botões e"”Para adicionar imagens em documentos HTML. HTML também permite que os desenvolvedores da Web criem tags personalizadas ou independentes. Embora existam poucas restrições para criar uma tag personalizada válida. A tag personalizada deve ter uma abertura e uma tag de fechamento. Além disso, as tags personalizadas de fechamento automático são inválidas em HTML.

Este artigo demonstrará:

• O que são tags personalizadas para html?
• Quais são as regras de nomeação para tags personalizadas?
• Exemplos para tags personalizadas válidas e inválidas
• Como criar tags personalizadas para html?

O que são tags personalizadas para html?

Atributos personalizados são projetados especificamente por desenvolvedores ou usuários e não estão incluídos nos elementos HTML5 padrão. Tags personalizadas especificam conteúdo adicional ou pessoal nas tags definidas pelo usuário. Essas tags funcionam de maneira semelhante às tags embutidas html. Além disso, para especificar a tag personalizada no documento HTML, os usuários devem seguir as regras de nomeação.

Quais são as regras de nomeação para tags personalizadas?

Existem várias regras de nomeação definidas para criar a tag personalizada. Alguns deles estão listados abaixo:

• Uma etiqueta personalizada sempre começa com uma pequena carta.
• Os usuários podem adicionar valores numéricos de (1 a 9) na tag personalizada.
• Pelo menos um (-) hífen deve ser adicionado à tag personalizada.
• Os usuários não podem entrar na letra maiúscula em uma etiqueta personalizada.
• Os usuários também podem usar qualquer tipo de emoji na tag personalizada.
• Os usuários não podem criar tags personalizadas de fechamento ou embutido no HTML.

Exemplos para tags personalizadas válidas e inválidas
A tabela a seguir mostra exemplos relacionados às tags personalizadas válidas e inválidas:

Tags personalizadas válidas	Tags personalizadas inválidas

Como criar tags personalizadas para html?

Para criar tags personalizadas no HTML, siga as instruções abaixo do dado.

Etapa 1: Crie uma tag personalizada
Primeiro, crie uma tag personalizada seguindo as regras de nomeação. Por exemplo, criamos o elemento "" em html. Em seguida, adicione texto entre as tags personalizadas.

Etapa 2: Crie o botão
Crie um botão com a ajuda de “”Dentro da tag personalizada:

Este contêiner foi criado por mim.


Clique em mim

Aqui, você pode ver que a tag personalizada foi criada com sucesso e também exibe o elemento do botão:

Etapa 3: Elemento personalizado de estilo
Os usuários também podem estilizar o contêiner personalizado acessando -o no CSS usando o nome da tag relevante. Por exemplo, acessamos o contêiner personalizado usando a tag criada “My-Tag”. Depois disso, aplique as propriedades abaixo codificadas na tag personalizada:

My-Tag
exibição: bloco;
borda: 4px verde sólido;
margem: 30px 15px;
preenchimento: 30px;
Background-Color: RGB (238, 181, 96);

Aqui:

• ““mostrar”A propriedade é utilizada para especificar como exibir um elemento. A tela é definida como um “bloquear”Para exibir o elemento em uma nova linha.
• ““fronteira”É usado para definir um limite ao redor do elemento.
• ““margem”Aloca um espaço ao redor do limite do elemento.
• ““preenchimento”Define um espaço dentro do limite de um elemento.
• ““cor de fundo”É utilizado para especificar a cor na parte traseira do elemento.

Saída

Pode -se observar que criamos e modelamos efetivamente o elemento ou tag personalizado.

Conclusão

Para criar uma etiqueta personalizada, os usuários são restritos após as regras de nomeação. Para criar uma tag personalizada, primeiro, especifique a tag de acordo com regras como “ Algum conteúdo ”. Em seguida, acesse a tag no CSS usando o nome da tag e aplique as propriedades CSS para estilo. Este tutorial ensinou o método mais fácil para criar uma tag personalizada para HTML.