[Question]
  [
**Task:** convert a HTML page into a mountain!
When HTML pages are indented, they can look like:
```
<div>
    <div>
        <div>
        </div>
        <div>
            <div>
            </div>
        </div>
    </div>
</div>
```
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 `<!DOCTYPE>`
* There will be no self-closing tags e.g. `<img />` or `<br />`
* 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 `<` or `</` and the tag name
* All input will be valid HTML
**Output** - a mountain representing the tags as above.
*More testcases:*
Input:
```
<div id="123"> HI </div><a><span></span></a>
```
Output:
```
   /\
/\/  \
```
Input:
```
<body id="<"></body>
```
Output:
```
/\
```
  
[Answer]
# HTML + CSS + JavaScript, 39 + 141 + 20 = 200 bytes
Outputs visually to the webpage. To allow this to work with special elements like `<body>`, 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:'\\'
```
```
<pre id=p>
```
---
# 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:'\\'
```
```
<pre id=p>
```
[Answer]
# Javascript + JQuery, ~~275~~ 246 bytes
Saved 29 bytes thanks to [Rick Hitchcock](https://codegolf.stackexchange.com/users/42260/rick-hitchcock)
```
j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i=0;V=a.children[i];i++){s=s+j(V,b+1)}return s+c+'\\\n';};f=s=>{s=j($(s)[0],0).split`
`;w=Math.max.apply(0,s.map(a=>a.length));o='';for(i=w-1;i>=0;i--){for(c=0;C=s[c];c++){o+=C[i]||' '}o+='\n'}alert(o)}
```
A pretty Naïve solution to the problem. Parses the HTML with JQuery's `$(string)`, then recursively builds a sideways mountain with the format:
```
/
 /
  children...
 \
\
```
Then rotates the resulting string counterclockwise, and alerts the result.
```
    j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i=0;V=a.children[i];i++){s=s+j(V,b+1)}return s+c+'\\\n';};f=s=>{s=j($(s)[0],0).split`
`;w=Math.max.apply(0,s.map(a=>a.length));o='';for(i=w-1;i>=0;i--){for(c=0;C=s[c];c++){o+=C[i]||' '}o+='\n'}return o}
update=_=>outp.textContent=f(inp.value)
```
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id=inp oninput=update()></textarea>
<pre id=outp></pre>
```
[Answer]
# HTML + JavaScript (ES6), 8 + 192 = 200 bytes
### JS
```
s=>[...(E.innerHTML=s,y=0,o=[],m=n=>1+[...n.children].map(m).join``+0)(E.firstChild)].map((c,x,a)=>{(o[y+=+c]||(o[y]=[...a].fill` `))[x]=`\\/`[c],y+=~-c})&&o.reverse().map(l=>l.join``).join`
`
```
### HTML
```
<a id=E>
```
```
f=
s=>[...(E.innerHTML=s,y=0,o=[],m=n=>1+[...n.children].map(m).join``+0)(E.firstChild)].map((c,x,a)=>{(o[y+=+c]||(o[y]=[...a].fill` `))[x]=`\\/`[c],y+=~-c})&&o.reverse().map(l=>l.join``).join`
`
console.log(f(`<div>
    <div>
        <div>
        </div>
        <div>
        </div>
        <div>
            <div>
            </div>
        </div>
    </div>
</div>`))
```
```
<a id=E>
```
## Less golfed
```
s=>{
    E.innerHTML=s,
    y=0,
    o=[],
    m=n=>1+[...n.children].map(m).join``+0,
    [...m(E.firstChild)].map((c,x,a)=>{
        y+=+c
        if(!o[y]) o[y]=[...a].fill` `
        o[y][x]=`\\/`[c]
        y+=~-c
    })
    return o.reverse().map(l=>l.join``).join`\n`
}
```
[Answer]
# [05AB1E](https://github.com/Adriandmen/05AB1E), ~~38~~ ~~26~~ 23 bytes
```
¶¡εDð¢4÷s'/å_„\/sèú}ζR»
```
[Try it online!](https://tio.run/##MzBNTDJM/f//0LZDC89tdTm84dAik8Pbi9X1Dy@Nf9QwL0a/@PCKw7tqz20LOrT7/38lJSWblMwyOy4FIECwsPD08UjiENHHZQKUCaGATgAA "05AB1E – Try It Online")
---
I am still golfing this. It assumes that in HTML you will always use 4 spaces for indentation, and does not work on "non-pretty" HTML. Not sure how to handle the "content" part, if this is invalid please edit the question to show an example with a node that has content.
[Answer]
# [Charcoal](https://github.com/somebody1234/Charcoal), 28 bytes
```
≔¹ηＦ⮌θ«≡ι"≦¬η<Ｆη¿⁼ζ/←¶\↙/≔ιζ
```
[Try it online!](https://tio.run/##LY3LCsIwEEXXyVcMs0qhUqo7jQFBQUFFXHcTamoDJX2ktlDx22OsWc3MfZzJS9nltayc21mrn4alMZTRhhZ1B@yuBtVZxdoogjcldtR9XgLT85VLqwAzxDUl5CKb0L/W/Z8QAnz2Z1wZ@Y3oAtihfcnKsikGTNDDb502PVufVeHLmJkswx@BEFV5RnD39WhCIpntDyXhqY5h8srHOf7QA@jHFtPlCgUcT8ATLwkuBbeNNIInYUhB3WKovg "Charcoal – Try It Online") Link is to verbose version of code. Explanation:
```
≔¹η
```
The `h` variable is used to keep track of whether we are inside quotes.
```
Ｆ⮌θ«
```
Loop over the string in reverse order.
```
≡ι
```
Switch on the currenc character.
```
"≦¬η
```
If it's a `"` then toggle the quote flag.
```
<Ｆη
```
If it's a `<` and we're not inside quotes, then...
```
¿⁼ζ/
```
If the next character (previous in the loop because we're looping in reverse) is a `/`, then...
```
←¶\
```
Move up and draw a `\` leftwards, else...
```
↙/
```
Draw a `/` and move down and left.
```
≔ιζ
```
Remember the character for the next loop iteration.
]