'How to add attributes to HTML tags when I use Emmet?

I use Sublime Text and Emmet plug-in. Various tags do not include all the attributes automatically when I use Emmet, so I have to put them manually. For example the input tags have only "type" attribute when I enter "input" and press "Tab". 

<input type="text">

but I want this for example 

<input type="text" name="" id="">

How can I edit whichever attributes I want to see in a tag? I tried to find a solution on YouTube and through Google search but was not successful.

htmltagssublimetextemmet


Solution 1:[1]

The Emmet syntax is modelled after CSS selectors, so in order to add attributes (or properties), you need pass them in square brackets.

Example

Input:

input#first_name[type=text][name=first_name]

Output:

<input type="text" id="first_name" name="first_name">

As for your example, you would need to type this:

input[type=text][name]#

This breaks down as follows:

  1. input - name of the tag
  2. type attribute with the value of text
  3. name attribute without value
  4. empty id attribute

Edit:

The type attribute stands for :, so you could write this as:

input:text[name]#

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ryan Matos

Related Questions