HTML Emmets :-

Emmet is a plugin for text editors that allows you to write HTML and CSS faster by using abbreviations that expand into full code. It can save a lot of time when writing code because we can type a few characters and then expand them into a long block of code with a single keystroke.

Features of Emmet :- 1. Abbreviation Expansion.

2.Code Formatting.

3.Code Snippets.

4.Customization.

5.Cross-Editor Compatibility.

Advantages of Emmet :- 1.Save Times.

2.Helps us write more consistent code.

3.Improves productivity.

4.Widely Supported.

5.Easy To Learn.

Emmet and Speedy HTML :- \=> Adding ID and CLASS attributes.

To add a class or ID to an HTML element using Emmet, we can use the following syntax: .className

#id

Example :- div.container => <div class = "container"></div>

div#main => <div id = "main"></div>

Parent-Child ,Siblings and Grouping :-

1.Parent-Child :- Emmet allows us to specify children for our elements by using the child operator >. Applying this will create an element inside of another one, as many levels deep as you require.

Example :- div>ul>li

<div>

<ul>

<li></li>

</ul>

</div>

Here, li is child of ul and ul is parent of li and

ul is child of div and div is parent of ul

2.Adding Sibling :- We can give HTML sibling tags by using emmet. (Elements that have the same parent are considered siblings.) To accomplish this, we must insert + symbols between tags.

Example :- div>p+p

<div>

<p></p>

<p></p>

</div>

Here two p are siblings to each other

3.Multiplication :- We now know how to include a child inside of a tag. But what if we need to put more children inside the tag (all with the same tag)? In certain circumstances, tag multiplication is an option. After the tag that needs to be multiplied and before the number of repetitions, we need to add a *.

Example :- ul>li*2

<ul>

<li></li>

<li></li>

</ul>

4.Grouping :- Emmet can be used to group HTML tags. To accomplish this, a bracket must be placed around the tags that will be gathered ().

Example :- div>(nav>ul>li*2)+footer>p

<div>

<nav>

<ul>

<li></li>

<li></li>

</ul>

</nav>

<footer>

<p></p>

</footer>

</div>