Categorías

← View All Tools

Referencia de Etiquetas HTML Auto-Cerrantes

Guía de referencia completa para elementos vacíos HTML (etiquetas auto-cerrantes), elementos SVG y elementos MathML

Filter elements by type

Filtrar elementos por nombre o descripción

Incluir ejemplos de sintaxis para elementos HTML (cuando corresponda)

Elegir el formato de salida

Datos clave

Categoría
Development
Tipos de entrada
select, text, checkbox
Tipo de salida
text
Cobertura de muestras
4
API disponible
Yes

Resumen

Esta herramienta proporciona una guía técnica detallada sobre los elementos vacíos en HTML, SVG y MathML, permitiéndote consultar rápidamente qué etiquetas no requieren una etiqueta de cierre y cómo implementarlas correctamente en tu código.

Cuándo usarlo

  • •Al verificar la sintaxis correcta de elementos que no contienen contenido anidado.
  • •Al desarrollar gráficos vectoriales con SVG o fórmulas matemáticas con MathML.
  • •Al depurar errores de validación en documentos HTML5 que requieren etiquetas auto-cerrantes.

Cómo funciona

  • •Selecciona el tipo de elemento (HTML, SVG o MathML) en el filtro de categoría.
  • •Utiliza la barra de búsqueda para localizar una etiqueta específica por su nombre.
  • •Activa la opción de incluir ejemplos de código para visualizar la sintaxis correcta.
  • •Elige el formato de salida deseado (texto, Markdown o JSON) para obtener la referencia.

Casos de uso

Desarrolladores web que necesitan validar la estructura de sus plantillas HTML.
Estudiantes de programación que aprenden las diferencias entre elementos de bloque y elementos vacíos.
Ingenieros de software que generan documentación técnica sobre estándares de marcado.

Ejemplos

1. Validación de etiquetas en un formulario

Desarrollador Frontend
Contexto
Un desarrollador está creando un formulario complejo y tiene dudas sobre si elementos como <input> o <hr> requieren una etiqueta de cierre.
Problema
Evitar errores de sintaxis y asegurar que el marcado sea limpio y compatible con HTML5.
Cómo usarlo
Selecciona 'Elementos Vacíos HTML' en el filtro y busca 'input' para confirmar su sintaxis.
Resultado
El desarrollador confirma que <input> es un elemento vacío y no necesita </input>, optimizando el tamaño del archivo.

2. Integración de elementos SVG

Diseñador Web
Contexto
El diseñador está incrustando iconos vectoriales directamente en el código fuente y necesita saber cómo cerrar correctamente los elementos <circle> y <path>.
Problema
Asegurar que los elementos SVG se rendericen correctamente en el navegador sin romper el DOM.
Cómo usarlo
Filtra por 'Elementos SVG' y activa 'Incluir Ejemplos de Código' para ver la sintaxis de cierre recomendada.
Resultado
El diseñador obtiene la sintaxis exacta para los elementos SVG, garantizando una renderización fluida en todos los navegadores.

Probar con muestras

html, image, svg
Muestras de HTML con Imágenes
Muestras de código fuente HTML con imágenes para probar la extracción
title token html
image
Ejemplos SVG
Ejemplos de Gráficos Vectoriales Escalables (SVG) que demuestran varias características y técnicas SVG
matched family image,svg
image, svg
Ejemplos D3.js Data Visualization
Ejemplos completos de visualización de datos D3.js incluyendo gráficos, mapas, animaciones y visualizaciones interactivas
matched family image,svg
image, svg
Ejemplos de XML
Ejemplos de formato XML (eXtensible Markup Language) desde estructuras simples hasta complejas
matched family image,svg
image, svg

Hubs relacionados

Herramientas de Image para Convert
Explora 100 herramientas de image para flujos de convert y encuentra utilidades cercanas con rapidez.
Herramientas de Image
Explora 40 herramientas de image para flujos de utility y encuentra utilidades cercanas con rapidez.
Herramientas de Html para Convert
Explora 11 herramientas de html para flujos de convert y encuentra utilidades cercanas con rapidez.

Preguntas frecuentes

¿Qué es una etiqueta auto-cerrante?

Es un elemento HTML, también llamado elemento vacío, que no tiene contenido ni etiqueta de cierre, como <br> o <img>.

¿Debo cerrar las etiquetas vacías en HTML5?

En HTML5, las etiquetas vacías no requieren una barra diagonal final, aunque es opcional y aceptable en algunos estilos de codificación.

¿Los elementos SVG usan etiquetas auto-cerrantes?

Sí, muchos elementos SVG funcionan como elementos vacíos, pero su sintaxis puede variar dependiendo de si se usan en un contexto XML o HTML.

¿Puedo exportar la lista de etiquetas?

Sí, puedes seleccionar el formato de salida JSON o Markdown para copiar y utilizar la lista en tus proyectos o documentación.

¿Esta herramienta incluye elementos obsoletos?

La referencia se centra en los estándares actuales de HTML5, SVG y MathML para asegurar que tu código sea moderno y válido.

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/self-closing-html-tags

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
elementType select No Filter elements by type
search text No Filtrar elementos por nombre o descripción
includeExamples checkbox No Incluir ejemplos de sintaxis para elementos HTML (cuando corresponda)
format select No Elegir el formato de salida

Formato de respuesta

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
Texto: Texto

Documentación de MCP

Agregue este herramienta a su configuración de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-self-closing-html-tags": {
      "name": "self-closing-html-tags",
      "description": "Guía de referencia completa para elementos vacíos HTML (etiquetas auto-cerrantes), elementos SVG y elementos MathML",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=self-closing-html-tags",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Puede encadenar múltiples herramientas, por ejemplo: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máximo 20 herramientas.

Si encuentra algún problema, por favor, póngase en contacto con nosotros en [email protected]