“Emmet — the essential toolkit for web developers”
Emmet is a plugin for text editors and IDEs that allows developers to write HTML and CSS code faster and more efficiently. It uses a shorthand syntax, known as "Emmet abbreviations," to expand into full HTML and CSS code.
For example, if you want to create a div with a class of "container", you can type "div. container" and then press the tab key. Emmet will automatically expand that shorthand into the full HTML code for a div element with a class of "container": <div class="container"></div>.
<!-- EMMET -->
<!-- HTML Boiler code -->
<!DOCTYPE html>
<!-- Document type :(HTML 5) which it is loading below it show that the
document which is shown below is in the version pf html 5 -->
<html lang="en">
<!-- Language Type: language which is written in English -->
<head>
<!-- head of the HTML -->
<meta charset="UTF-8" />
<!-- Uniform transformation Format charaterset is 8 -->
<!-- Infromation about information (it gives information about which is written) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- when we vist the web site it show the viewport size of the browser 1
is normal and set 1 if we increase zoom in and zoom out -->
<!-- Uniform transerform -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>calss 2 || Emmet</title>
<link rel="stylesheet" href="../style.css" />
<!-- Emmet it make the code easy -->
<!-- essiential tool hit for developer -->
<!-- emment downloder vs code has bydefault in our code -->
<!-- boiler code -->
<!-- Emment and Speedy -->
<h1></h1>
<!-- write the name of the tag and enter the tab -->
<!-- tag is the id and class hold the css -->
<p></p>
<p class="pwl"></p>
<!-- Short cuts: To Declare a Class tagname.classname (p.container)-->
<h6 class="class3"></h6>
<!-- Short cuts: To Declare a ID tagname#classname press tab for autofill(p#section) -->
<div class="header"></div>
<div class="section"></div>
<div id="section2"></div>
<!--Shortcuts for decleration of the class or id: source with the value that have given
p[class]classname
p.section
img[src=imgaddress]tab
-->
<img src="../src/images/img3.jpg" alt="logo" />
<!-- P tag to write inside the p tag we can use {} curly braceses but
if we want to use default syntax we need do manually -->
<p>lorem</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eaque
officiis minus rerum, dolor, cupiditate maxime eos tempore ratione
obcaecati laboriosam animi possimus voluptatum, quasi nihil culpa beatae
itaque. Nulla?
</p>
<!-- practice -->
<!-- Shortcut : enter the tag name clt + enter for the next line-->
<p></p>
<h1></h1>
<h6></h6>
<!-- class decleartion short cut -->
<p class="section_right"></p>
<!-- p[id=right_container] -->
<p id="right_container"></p>
<!-- p{weelcome}pwskills -->
<p class="pwskills">welcome</p>
</head>
<body></body>
</html>
Emmet also provides a number of other features, including:
Multi-cursor support: Allows you to apply a command to multiple lines at once.
Incremental number: Allows you to quickly add incremental numbers to your HTML elements.
Nesting: Allows you to nest elements within other elements using the ">" operator.
Attributes: Allows you to add attributes to your elements quickly and easily.
Snippets: Allows you to create your own custom snippets for frequently used code.
Emmet supports a wide range of text editors and IDEs, including Visual Studio Code, Sublime Text, Atom, and more. It can save developers a lot of time and effort by allowing them to write HTML and CSS code more quickly and efficiently.