Third day of full stack developer -> Semantic Generic Element/ Emmet tool

Semantic Generic Element

1. <Main> </Main>
2. <nav> </nav>
3. <Section> </Section.
4. <article> </article>
5. <aside></aside>
6. <header></header>
7. <footer></footer>
8. <figure></figure>
9. <data></data>

These all are the generic element used in place of div and they give perfect readability to a code.

Emmet tool

Short cut for HTML and CSS in Emmet tool, and pre-install in vs-code.

And to download the Emmet tool click the link  https://emmet.io/

1.

Child: >

You can use > operator to nest elements inside each other:

div>ul>li

2. 

Sibling: +

Use + operator to place elements near each other, on the same level:

div+p+bq

3. 

Multiplication: *

With * operator, you can define how many times element should be outputted:

ul>li*5

4.

Grouping: ()

Parenthesises are used by Emmets’ power users for grouping subtrees in complex abbreviations:

div>(header>ul>li*2>a)+footer>p

Document link for more syntax of emmit:-

https://docs.emmet.io/abbreviations/syntax/