Once you upload your design file into RapidUI, you’ll watch it automatically turn into PixelPerfect code (HTML & CSS).
Same as photoshop or sketch, an HTML based website has hierarchy between its different elements (or as we know them - layers). In this guide we are going to explain the meaning of HTML hierarchy, what are parents and children in basic HTML, and the different stuff you can do using the hierarchy.
So, What is the HTML hierarchy?
Every Html document is made out of two basic tags:
<head> - can include a title for the document, styles, meta information, scripts etc.
<body> - includes the content of the HTML document that will be directly visible on your web page, aka the main content of the HTML document.
Basically, an HTML document is like a family tree. an element that is directly above another element in the hierarchy is called the parent of the element below it. The element below the parent is called the child. When two elements are equal in the hierarchy, they are known as siblings.
Like in Photoshop and Sketch, layers that will be higher up in the hierarchy - will display on top of each other. This also applies to z-index - the higher the hierarchy, the higher the z-index.
Siblings can have different z-index, but it’ll always be lower than their parent’s z-index.
(read our full z-index guide here).
The higher an element’s hierarchy will be - the higher an element’s display will be. Elements with a higher z-index will be displayed on top of elements with a lower z-index.
Tip: If you wish to find an element’s parent, simply mark the element and click shift+p.
What actions can be done using the hierarchy?
Grouping means combining a few objects/layers together, putting them together as one. When grouping different elements together, all of the grouped objects will be each other’s siblings, under the same parent layer.
Grouping allows you to make changes (moving, editing, adding animations, etc.) to all the grouped elements together.
You can also add an object as another object’s child. For more information about how to add an object as a child of another object click here.
How to group different elements together?
1. Mark the different items you wish to turn into a group (simply select the first element, hold the ctrl/command button, select the other items you wish to group, and then release the ctrl button OR just click and drag your mouse over the elements in order to select what you wish to group together).
2. Right-click and press group/ctrl/command+G
If you wish to remove an element from its siblings and move it to another parent:
1. Mark the element you wish to move to another parent
- Press ctrl+x/ command+x (Cut action)
3. Mark the element you wish to be the new parent for your cut element.
4. Press Ctrl+v/Command+v and paste the element as a child of its new parent.
This is the Layers Hierarchy. As you can see, some elements are the children of others. Moving the objects visually will change the hierarchy accordingly - automatically creating organized HTML.