Emmet Shortcodes don't work [Topic edited for clarity]

[catinarezi]

Hello.

I was following the tutorial Create a responsive grid layout (adobe.com)

and it teaches the code  <div class=“row”></div>, then it teaches a shortcut that should create this same line .row tab, but, for some reason, it simply doesn't work on my Dreamweaver, the app simply keeps the text as it is.

• Dreamweaver 2021
• Windows 10 Home Edition
• Steps:

1. Open the Source Code (html) tab on Dreamweaver;
2. Between the lines <main> and </main> type the code (shortcut) .row and then press the tab button on keyboard.

• Expected result: shortcut typed should be automatically converted to <div class=“row”></div> but nothing happens (.row and the tab space just keep there as a simple text).

[Nancy OShea]

That's an old tutorial from 2016. 😮

To use Emmet Shortcodes, you need a current version of Dreamweaver (21.3) and Emmet Shortcodes must be enabled in your Preferences panel (Ctrl + U).  See Screenshot.

In Code View, try this:

<main>

[TYPE:]  .row>p>lorem  [hit TAB KEY] 

</main>

Ctrl + S to Save and F5 to refresh.

Your results should look like this:

Hope that helps.

[catinarezi]

Well, I have a mystery right now but I think I discovered what was happening, but not exactly why. 

First I tried everything you and Jon taught me and nothing worked. And suddenly while I was already recording you a video, I used my mouse instead of my Wacom pen and everything worked. I guess I can't use my digital pen as a mouse on Dreamweaver. So, problem solved. Thanks for the help!

[Nancy OShea]

A Green Checkmark denotes valid code.

A Red X indicates the presence of code validation errors.

For best results, maintain error-free code. 

[catinarezi]

Well, problem seemed to be solved, but now it's happening again and I'm not even with the Wacom connected to my computer.

When I run Validation, it doesn't show any error, but the number of the line shows up in red with the message "special characters must be escaped" [>]. I have no idea on how to escape a character. Did I push some wrong button or something?

[Nancy OShea]

There might be a problem with your keyboard if TAB key isn't working.

[catinarezi]

You mean the tab is broken or it's not working properly? Because in every other program it works fine...

[Nancy OShea]

Did you restart your computer?

[Jon Fritz]

The error is "correct" in that you can't have several ">" characters floating around in your html text, which is what DW is seeing the line ".row>p>lorem" as right now in your image since Emmet didn't expand the short code.

But your image points to a potentially bigger issue, for some reason, DW isn't recognizing the file as a html document. You can see this because there is no code coloring. The Code View should look something similar to this, with different colors for tags, attributes, and content... 

It looks like the program is treating your new file as if it's a .txt file (Emmet doesn't run in .txt files at all).

[catinarezi]

Well, I started a new file because I thought the problem could be the file.

But this one has more lines and I just edited a template from an Adobe Tutorial, I believe their file was correctly set as html (and even for the new one, I chose html5). I really don't know why the program is doing this. I have no idea of what did I do to temporarily correct it and now it doesn't work again...

I restarted my computer and even turned off and on my keyboard...

Are the lines on this one ok? Or you meant that this particular line is being recognized as a text? I tried another emmet code without the ">" and they don't work either... The code was from the Adobe tutorial and should be converted to <div class=info-box-tan></div>. This one isn't showed as an error on results, but nothing happens...

[Nancy OShea]

Restore Preference.

https://helpx.adobe.com/dreamweaver/kb/restore-preferences-dreamweaver.html

And see my reply on Nov 19 above.  Make sure Emmet is enabled.

[catinarezi]

This one didn't work, even with emmet enabled.

But I opened the "output" that Jon talked about and I changed from html to something else and then came back to html and emmet is working. I hope it's not just a coincidence. I tried that because he told me my file was not reading the code as html but as text...

[Nancy OShea]

Right.  Emmet is short code for HTML.  It doesn't work with .txt files.

Glad you finally got it sorted.

[Jon Fritz]

If Emmet is enabled (verify that first using Nancy's instructions), it is possible a code error before your insertion point is causing Emmet to fail. Check your code for errors and repair anything found by the Validator.

To open the Validator, go to Window > Results > Validation then hit the "Play" button (arrow icon) in the panel that opens, then choose Current Document (W3C) to get a listing of potential issues.