Create Custom HTML Elements
There are many situations where you may need specific HTML elements based on your project or business requirements. You can further customize your output with any HTML element using our Class Tag with your folders, or Code Tag with your text layers.
Group Containers
These elements are used in HTML to store child elements or sub groups. An example of a group container is a <section/> or a <ul/>. On their own, each element does not do much, but when child elements are added – each can render content differently.
RECOMMENED: You should use Class Tag with group containers. Export Kit will map folder layers similar to the behavior of common HTML group containers.
Hybrid Containers
These elements have dual capabilities to allow both multiple child elements, or a single element for rendering. An example of a hybrid container is an <a/>, <p/>, or <li/>. These elements allows for a single text child or dynamic sub content with multiple layers.
MULTIPLE CHILDREN: Use Class Tag if your list has complex or dynamic content.
SINGLE CHILD: Use Code Tag if you have a single child, and wrap your text layer with the element.
Element Conversion Tables
This will provide you with a quick reference to many common HTML, CSS, JavaScript and PHP elements which you can create with Export Kit. You can further customize your output with any HTML5 element using our Class Tag with your folders. All elements support custom properties so you can map them any way you like.
HTML Tag | Usage |
<div> | (natural) – Folders – Shapes – Images with CSS Images enabled |
<img> | (natural) – Images (+rasterize) – Smart Objects (layer tag) – Any Layer – ${img} or ${image} |
<a> | (layer tag) – Layers Only – ${link://google.com} |
<span> | (layer tag) – Paragraph Text Layers Only – ${p} |
<form> | (layer tag) – Folders Only – ${form|get://yourserver.com/path/to/script.php} |
<input> | (layer tag) – Text Layers Only – ${input:textarea} |
Custom HTML Class Elements
You can create ANY element including iframe, canvas and object, the following are just examples. Note that Class tag only works with Folders.
HTML Tag | Usage |
<div> | ${class|div: } |
<img> | ${class|img: } |
<span> | ${class|span: } |
<form> | ${class|form:action=”/path/to/script.php”} |
<input> | ${class|input:type=”textarea”} |
<p> | ${class|p: } |
<a> | ${class|a:href=”//google.com” title=”google link”} |
<textarea> | ${class|textarea:rows=”5″} |
<ul> | ${class|ul:class=”menu nav”} |
<ol> | ${class|ol:class=”menu footer”} |
<li> | ${class|li:class=”nav nav-item”} |
<section> | ${class|section:role=”content” data=”val1″} |
<header> | ${class|header:id=”page_content_header”} |
<footer> | ${class|header:id=”page_content_footer”} |
<script> | ${class|script: } |
<style> | ${class|style: } |
