Convert a HTML page into a mountain Task: convert a HTML page into a mountain!

When HTML pages are indented, they can look like:

&lt;div&gt;
    &lt;div&gt;
        &lt;div&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


But to be honest, a mountain is more representative of this structure.

So we can rewrite it as: 

     /\
  /\/  \
 /      \
/        \


The outermost slashes on the left and right correspond to the outer div - each pair of HTML tags should be represented as / for the starting tag and \ for the ending tag - inside all tags are "higher", with the same structure.

Input:


There will be no &lt;!DOCTYPE&gt;
There will be no self-closing tags e.g. &lt;img /&gt; or &lt;br /&gt;
There may be attributes or content inside the tags
There may be spaces or tabs - your program should ignore these
There will be no spaces between &lt; or &lt;/ and the tag name
All input will be valid HTML


Output - a mountain representing the tags as above.

More testcases:

Input:

&lt;div id="123"&gt; HI &lt;/div&gt;&lt;a&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;


Output:

   /\
/\/  \


Input:

&lt;body id="&lt;"&gt;&lt;/body&gt;


Output:

/\
HTML + CSS + JavaScript, 39 + 141 + 20 = 200 bytes

Outputs visually to the webpage. To allow this to work with special elements like &lt;body&gt;, all letters in the input are replaced.



p.innerHTML=prompt().replace(/\w/g,'a')
#p,#p *{display:flex;padding:0 0 1rem;align-items:flex-end;font-size:0}#p :before,#p :after{content:'/';font-size:1rem}#p :after{content:'\\'
&lt;pre id=p&gt;






HTML + CSS + JavaScript, 10 + 103 + 20 = 133 bytes

Solution that works if there is no content within tags.



p.innerHTML=prompt()
#p,#p *{display:flex;padding:0 0 1em;align-items:flex-end}#p :before{content:'/'}#p :after{content:'\\'
&lt;pre id=p&gt;