How can HTML code written in one line be converted into several lines depending on the depth of nesting of tags?

Question

HTML

It is necessary that when a keyboard shortcut is pressed, the selected HTML code, written in one line, is converted into several lines according to the template, depending on the depth of nesting of the tags.
For example:
Before

<ul>
    <li><label for=""></label><input type="text"></li>
    <li><label for=""></label><input type="text"></li>
    <li><label for=""></label><input type="text"></li>
</ul>

After

<ul>
    <li>
         <label for=""></label>
         <input type="text">
    </li>
    <li>
        <label for=""></label>
        <input type="text">
    </li>
    <li>
        <label for=""></label>
        <input type="text">
    </li>
</ul>

Example 2

<p class="appointment-item"><input type="text" name="time" id="" placeholder="10:00" value=""></p>

<p class="appointment-item">
    <input type="text" name="date" id="" placeholder="08.10.2017" value="">
</p>

Etc.

Answer 1

Sublime Text 3 has a plugin: auto format html
Download it via Package Control and enjoy ;)