HTML

how to use html shortcuts

div#div-id <!-- Create a div element with the id: div-id --> 
div.div-class <!-- Create a div element with the class: div-class -->
div*10 <!-- Create 10 div elements -->
div{CSS} <!-- Create a div element with innerHTML: 'CSS' -->
div+span <!-- Create a div element and a span element -->
div>div <!-- Create a parent div element with a child div element -->
div[onclick] <!-- Create a div element with the onclick attribute -->
$ <!-- When you combine it with the innerHTML & multiply or with --> 
  <!-- the id & class shortcuts it's really useful -->

<!-- Example --> div#div-${$}*3
<div id="div-1">1</div>
<div id="div-2">2</div>
<div id="div-3">3</div>

<!-- You can also combine them: -->
div#ABC.div-class>span{This is how to save time when coding HTML}+p{shortcuts}

<!-- this will generate: -->
<div id="ABC" class="div-class">
  <span>This is how to save time when coding HTML</span>
  <p>shortcuts</p>
</div>

<!-- These shortcuts work in VScode and for other code editors im not sure -->

html shortcut

write "!" and then this will show hint for HTML code then press "Enter" button to make starter template of HTML