emmet html basic boilerplate

“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.

What is Emmet?

Subscribe to my newsletter

Preeti samuel

Preeti samuel