HTML 5 is full of semantically correct ways to create tags.
The types of elements you create are important for accessibility, so screen readers know how to read your content.
The Quick Tag Editor is useful if you want to go back and clean up the tags you've created, experiment with different tags or make quick edits on the fly.
This video shows you how to work with the three modes of the Quick Tag Editor.
I'll start by switching to the Design workspace.
The Quick Tag Editor lets you edit in elements code in Live view in one of three ways: you can add the contents of a tag, wrap a tag with another tag or insert a tag.
To launch the Quick Tag Editor, select an element in Live View, then press Control T or Command T on your Mac.
Notice that the Quick Tag Editor appears in Edit mode.
Press Control T or Command T again to switch to Wrap mode.
Press Control T or Command T again to switch to Insert mode.
Use this process to access and edit code with any element in Live view.
So, let's take a look at the Quick Tag Editor in action.
I'll start by updating a div tag to an HTML5 section tag, then add the attributes of an image.
Select the feature image in Live view and press the up-arrow key to change the selection to the div surrounding the image.
Open the Quick Tag Editor in Edit mode, select and delete the div tags.
Type "se" and notice that code hints display the section tag.
Press Enter to change the tag then press Enter again to commit the change.
Notice that Code view update is showing the change.
Dreamweaver CC even updates the close tag.
Use this approach to easily swap between your layout tags.
If I want to update the image tag, I can select it and open the Quick Tag Editor in Edit mode.
I'll change the source path to "images/feature2.png" then press Enter.
Notice that Live view updates to show the new image and the code changes are reflected in Code view.
Next, I'll make the image clickable by wrapping it in an anchor tag.
I can easily accomplish this using the Quick Tag Editor.
Select the image again and press Control T or Command T twice to open the Quick Tag Editor in Wrap mode.
Notice that the Quick Tag Editor shows a Code Hand menu with tag options.
Select the first option, an anchor tag, then press the Spacebar.
Type in "hr" and notice that the code hand jumps to "href".
Press Enter and type in the URL for the link.
Press Enter again and notice that the updated code appears in Code view, with an anchor tag wrapping the Section tag.
Also know that the close tag was generated for you.
The last mode in the Quick Tag Editor enables you to insert a new HTML element before an existing one.
If I want to insert a div tag above the image, I can do that by using the Insert mode.
Select the image if it's not already and open the Quick Tag Editor in Insert mode.
Type "di" and press Enter to select the div tag in code hands.
And press Enter again to commit the code.
Notice that Code view updates.
Live view provides many tools and shortcuts you can use to match and generate code.
The Quick Tag Editor is a simple and powerful feature that you can use for quick edits to code while working in Live view.
Try using all three modes of the Quick Tag Editor while working with your designs in Dreamweaver CC.
