Cómo crear etiquetas personalizadas para HTML
Este artículo demostrará:
- ¿Cuáles son las etiquetas personalizadas para HTML??
- ¿Cuáles son las reglas de nombres para etiquetas personalizadas??
- Ejemplos para etiquetas personalizadas válidas e inválidas
- Cómo crear etiquetas personalizadas para HTML?
¿Cuáles son las etiquetas personalizadas para HTML??
Los atributos personalizados están diseñados específicamente por desarrolladores o usuarios y no están incluidos en los elementos HTML5 estándar. Etiquetas personalizadas especifican contenido adicional o personal en las etiquetas definidas por el usuario. Estas etiquetas funcionan de manera similar a las etiquetas incorporadas HTML. Además, para especificar la etiqueta personalizada en el documento HTML, los usuarios deben seguir las reglas de nomenclatura.
¿Cuáles son las reglas de nombres para etiquetas personalizadas??
Hay varias reglas de nombres definidas para crear la etiqueta personalizada. Algunos de ellos se enumeran a continuación:
- Una etiqueta personalizada siempre comienza con una letra pequeña.
- Los usuarios pueden agregar valores numéricos de (1 a 9) en la etiqueta personalizada.
- Se debe agregar al menos un (-) guión a la etiqueta personalizada.
- Los usuarios no pueden ingresar la letra mayúscula en una etiqueta personalizada.
- Los usuarios también pueden usar cualquier tipo de emoji en la etiqueta personalizada.
- Los usuarios no pueden crear etiquetas personalizadas en línea autónoma o en línea en el HTML.
Ejemplos para etiquetas personalizadas válidas e inválidas
La siguiente tabla muestra ejemplos relacionados con las etiquetas personalizadas válidas e inválidas:
| Etiquetas personalizadas válidas | Etiquetas personalizadas no válidas |
|---|---|
Cómo crear etiquetas personalizadas para HTML?
Para crear etiquetas personalizadas en HTML, revise las instrucciones dadas a continuación.
Paso 1: Crear etiqueta personalizada
Primero, cree una etiqueta personalizada siguiendo las reglas de nomenclatura. Por ejemplo, hemos creado el elemento "" en HTML. Luego, agregue texto entre las etiquetas personalizadas.
Paso 2: Crear botón
Crea un botón con la ayuda de ""Dentro de la etiqueta personalizada:
Este contenedor fue creado por mí.
Aquí, puede ver que la etiqueta personalizada se ha creado con éxito y también muestra el elemento del botón:
Paso 3: Elemento personalizado de estilo
Los usuarios también pueden diseñar el contenedor personalizado accediendo a él en CSS utilizando el nombre de la etiqueta relevante. Por ejemplo, hemos accedido al contenedor personalizado utilizando la etiqueta creada "my-tag". Después de eso, aplique las propiedades codificadas a continuación en la etiqueta personalizada:
bloqueo de pantalla;
borde: 4px verde sólido;
margen: 30px 15px;
relleno: 30px;
Color de fondo: RGB (238, 181, 96);
Aquí:
- "mostrarLa propiedad se utiliza para especificar cómo mostrar un elemento. La pantalla se establece como un "bloquear"Para mostrar el elemento en una nueva línea.
- "borde"Se usa para definir un límite alrededor del elemento.
- "margen"Asigna un espacio alrededor del límite del elemento.
- "relleno"Define un espacio dentro del límite de un elemento.
- "color de fondo"Se utiliza para especificar el color en la parte trasera del elemento.
Producción
Se puede observar que hemos creado y diseñado efectivamente el elemento o etiqueta personalizados.
Conclusión
Para crear una etiqueta personalizada, los usuarios están restringidos siguiendo las reglas de nombres. Para crear una etiqueta personalizada, primero, especifique la etiqueta de acuerdo con reglas como " Algo de contenido ". Luego, acceda a la etiqueta en CSS usando el nombre de la etiqueta y aplique las propiedades CSS para el estilo. Este tutorial le ha enseñado el método más fácil para crear una etiqueta personalizada para HTML.