Emmet & Zen Coding Explained

Emmet is like a magic shortcut for writing HTML and CSS code. Instead of typing out long and repetitive code, you can use Emmet abbreviations to quickly generate and expand your code. It's like having a secret language that makes coding faster and easier. Emmet command can quickly generate without typing out all the HTML tags manually. Emmet is a tool that helps web developers be more efficient in creating the structure of their web pages.

Emmet was formerly called as "Zen Coding".

Some Popular Emmet to HTML Document

Generate HTML Template : <!DOCTYPE html> : This is done using ! + Tab Key or ! + Enter key or Html:5 + Enter key

```html

<!DOCTYPE html>
Document

<!DOCTYPE html> Document


2. **Writing a Content in a tag** : Suppose we want to write a content within a tag. This can be achieved by tag\_name{content}.

    ```html
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <!--This can be done using p{content}-->
        <p>Rama was born to King Dasharatha and Queen Kausalya of Ayodhya. His birthplace is believed to be in present-day Ayodhya, Uttar Pradesh, India. His birth is celebrated annually during the festival of Ram Navami.</p>
      </body>
    </html>

Class : Suppose we want to give a class to a html tag we can do so using tag_name.class_name

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <!-- This is done using p.para -->
     <p class="para"></p>
 </body>
 </html>

ID : Suppose we want to give a id to a html tag we can do so using tag_name#id_name

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <!-- This is done using p#para1 -->
     <p id="para1"></p>
 </body>
 </html>

Id and Class in one Go: Suppose we want to give a id and class to a html tag we can do so using tag_name#id_name.class_name or tag_name.class_name#id_name

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <!-- This is done using p#para1.para -->
     <p id="para1" class="para"></p>

     <!-- This is done using p.para#para2 -->
     <p class="para" id="para2"></p>

     <!--One thing is to notice is that if we declear id first then it will appear first and later will be class and vice-versa-->
 </body>
 </html>

Child : Suppose we want any tag in another tag we can do it using "<". Parent_tag<child_tag.

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
   </head>
   <body>
     <!-- This can be using div>p-->
     <div>
       <p></p>
     </div>

     <!--This can be done using div>p>a-->
     <div>
       <p><a href=""></a></p>
     </div>
   </body>
 </html>

Siblings : Before we go to know sibling we will first go to know what is Sibling ? Sibling is similar to real world sibling like in real world we call A sibling is your brother or sister. It means that they have same parent. So, is the case of HTML sibling means we will declare a parent and it will contain child within it. It can be done using + symbol in HTML (first_tag_name+second_tag_name+...+nth_tag_name).

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <!-- This can be using div>p+a+img-->
     <div>
         <p></p>
         <a href=""></a>
         <img src="" alt="">
     </div>
     <!--" >" symbol is used to create child and " + " is used to create sibling. -->
 </body>
 </html>

Other Attribute : This is done using Square Bracket [ ] tag_name[attribute_name='value'].

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
   </head>
   <body>
    <!--This can be done using a[href="https://www.google.com/" alt="Google.Com Link"] -->

    <a href="https://www.google.com/"></a>

   </body>
 </html>

Ctrl + Spacebar : Suppose we are writing any emmet and by mistake spacebar is pressed, when we move back to emmet shortcut we will find that that particular emmet is not working. So, we can make it active rather than deleting and typing again the same emmet by moving our cursor to to emmet and press ctrl+spacebar.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- this can be done using ctrl+spacebar -->
    p{awadh} 
    <p>Awadh</p> 

  </body>
</html>

I hope this blog post has been informative and insightful. If you have any questions or would like to explore more coding emmets, feel free to reach out or explore my other blog posts.

Twitter/X -- im_awadh_

LinkedIn -- imawadh

Instagram -- im_awadh_

Happy Coding!

What is Emmet ? What is Zen Coding ?Why is Zen Coding ?

Table of contents

Some Popular Emmet to HTML Document

Subscribe to my newsletter

Awadh Kishor Singh

Awadh Kishor Singh