A couple of thoughts about source and picture html tags in Sitecore SXA

The OOTB html tag list is categorised into two types:

1. Section tags: /sitecore/system/Settings/Foundation/Experience Accelerator/Rendering Variants/Enums/Tags - html tags looking like this <tag>.....</tag> 

Example: <div>....</div>

Added this way as part of variant definition: 

2. Self-closing tags: /sitecore/system/Settings/Foundation/Experience Accelerator/Rendering Variants/Enums/Self Closing Tags - html tags looking like this <tag /> 

Example: <br />

Added this way as part of variant definition: 

Understandably, they are a very useful list but used as a DropLink Source for the tag Field. The tag field is what is used to specify the tag while building the variant definition.

So, by this time, you would have understood the disadvantage of adding/maintaining new tags in the list. For instance, if you want to keep your tags within a separate folder so that you can easily serialise  the custom tags/folder as a whole, the folder would be shown instead of the tags (underneath) for selection in the droplink! 

This could make it cumbersome to maintain new/custom tags.

One hack for not displaying the folder name in the droplink is in the concerned item i.e., for instance, /sitecore/templates/Foundation/Experience Accelerator/Rendering Variants/VariantField 

Change the Source from 

/sitecore/system/Settings/Foundation/Experience Accelerator/Rendering Variants/Enums/Tags

to 

query:/sitecore/system/Settings/Foundation/Experience Accelerator/Rendering Variants/Enums/Tags/*[@@templatename='Enum']

Then, our original problem of tag maintainability related to serialisation still stays. Similarly, there could be workarounds/possibilities to extend existing tags as well as referencing the tag list but if these tags are commonly used, it would be good to add those to the OOTB functionality since I see at least a couple of good blog posts dating back a few years asking to add these tags manually.

Hopefully, in one of the future releases, these tags will be added to the respective tag list OOTB. Until then, you can install this package if you are lazy to create the tags manually under System settings!

https://github.com/navancommits/individual-files/blob/main/sourceandpicturePackage.zip

The download option, instead of Save as in the github page, seems to bring down the zip  intact:

After the package installation, the new tags must be visible in the respective droplink:

Section renderer:

Html tag renderer:

Just for reference:

Tag List (section tags) is used as source in following item templates:

/sitecore/templates/Foundation/Experience Accelerator/Rendering Variants/VariantSection

/sitecore/templates/Foundation/Experience Accelerator/Rendering Variants/VariantToken

/sitecore/templates/Foundation/Experience Accelerator/Rendering Variants/Model

/sitecore/templates/Foundation/Experience Accelerator/Rendering Variants/VariantText

/sitecore/templates/Foundation/Experience Accelerator/Rendering Variants/VariantTemplate

Self-closing tag list is used as source in following item templates:

/sitecore/templates/Foundation/Experience Accelerator/Rendering Variants/HTML Tag