Add HTML5 support to Expression Web 4!


With Internet Explorer 9 Beta’s deep support for HTML 5 and the increasing adoption of HTML5 for RIAs, the Expression Web team is extremely excited to release our free HTML 5 Add-in for Expression Web 4! The HTML5 Schema Configuration Add-In for Expression Web enables the new HTML5 schema to check your markup for errors and provide IntelliSense for HTML5 tags, attributes and values in code view.

Install the HTML5 Schema Configuration Add-In

  1. Quit Expression Web 4 if it is open.
  2. Download the HTML 5 Schema Configuration Add-In here and save it to your local computer.
  3. Start Expression Web 4.
  4. Choose Tools > Add-Ins .. to display the Manage Add-Ins dialog box.

    image_thumb[32]

  5. In the Manage Add-Ins dialog box, click the Install.. button.
  6. In the Open Expression Web Add-in File dialog box, select the HTML5Schema.xadd add-in file you downloaded, and click Open. Be sure to click “Yes” when Expression Web asks you to enable the add-in.

image_thumb[31]

image_thumb[7]

If the add-in is correctly installed, it will appear in the Manage Add-In dialog, and the Standard toolbar will display a new “HTML5” button.

image_thumb[9]

image_thumb[11]

Using the HTML5 Schema Configuration Add-In

  1. Start Expression Web 4 with administrative privileges (Right-Click the start icon and select“Run as Administrator”).
  2. Click the HTML5 button in the standard toolbar. The Configure HTML 5 Schemas dialog box lets you enable or disable the new HTML5 schema.

    image_thumb[33]

  3. Click the Enable HTML 5 button to update the Expression Web HTML 5 schemas. Click the X in the upper right corner of the dialog box to close it.
  4. Restart Expression Web 4.
  5. Change your editor options by choosing Tools > Page Editor Options. On the Authoring tab, set both the Document Type Declaration option and Secondary Schema options to HTML5.

If you set your Doctype and Secondary Schema options to HTML5 in the Page Editor Options, then whenever you create a new web page in Expression Web, the new page contains the HTML5 doctype:

<!DOCTYPE html>

If you don’t change the default doctype to HTML5 in the Page Editor Options, you can still create a new HTML5 page by hand in the Code view of a page or open existing HTML5 documents and edit them in Expression Web 4.

Either way, when you edit an HTML5 document in code view, Expression Web 4 now provides IntelliSense for HTML 5 elements, attributes and their values.

image_thumb[21]

image_thumb[23]

The Expression Web team is very excited about the the new generation of great web applications built on HTML 5 and is happy to support you with this free add-in for HTML5!

Known Issues

  • If you uninstall this add-In from Expression Web, files are left behind and will cause subsequent installations of the Add-In to break. The work-around is simple: Delete any HTML5Schema folders in your %APPDATA%\Microsoft\Expression\Web 4\Addins directory. Then re-install the Add-In.
  • The current SVG schema is provided by the add-in, however, SVG markup is incorrectly flagged as invalid by Expression Web 4. The work-around is to use an online code validator, such as provided by the W3C. 
  • Expression Web 4 sometimes flags closing HTML 5 tags as mismatched tags even though the markup is valid. The work-around is to use an online code validator, such as provided by the W3C.
  • Enabling or disabling HTML 5 with the Add-in requires Expression Web to be run with administrative privileges. 
Comments (17)

  1. Mohsen says:

    I did exactly what u said here but the point is ,whenever i click on HTML5 to enable it .nothing will happened . just sound like its not enabling anything .therefore i cant enable html5 ???

    can u ?

  2. gsmith says:

    Make sure that you are runing Expression Web as an admin when enabling or disabling the HTML 5 schemas, since it requires writing files to the %Program Files% directory of the machine.

  3. Mohsen.Zaim says:

    Thanks Mr Gsmith

    its working now …

  4. Gray Wolf says:

    I have "two" tool bars for html 5 (after installing) and I have no contorl over either, for removing. Therefor, I would like very detailed and explicit instructions on removing the Entire HTML 5 add-in. The small amount of instructions for removing on this website are very skimpy. Thanks in advance.

  5. anirudha says:

    please help me it is not worked. i try form a long time but nothing success i try  to do. how i can use it any suggestion for use it

  6. tom says:

    i followed the instructions, running is admin to install and enable the feature. when i click the "html 5" it says, html 5 editing is enabled. i don't see any html 5 specific intellisense? any idea what i am doing wrong?

  7. tom says:

    i found out what has to be done, it's easy to overlook but you need to set both primary AND secondary schema options to HTML5.

    It's easy to overlook:

    On the Authoring tab, set both the Document Type Declaration option and Secondary Schema options to HTML5

  8. Jon says:

    I followed all of these steps very closely 3 times, but am unable to get this to work.  I'm using version 4.0.1165.0

    I have the HTML5 button in my toolbar, and enabled it while Admin and restarted and updated the Document Type Declaration option and Secondary Schema options to HTML5 while admin and restarted.  Still the HTML5 intellisense is not working.  The <input tag has none of the new html5 "type" options and the <aside and <section tags are not recognized either.

  9. gsmith says:

    For those of you having trouble getting this add-in to work, try or check the following things:

    1. Uninstall all copies of the add-in manually by deleting any HTML5Schema folders in your %APPDATA%MicrosoftExpressionWeb 4Addins folder

    2. Restart Expression Web as an Administrator and NOT in safe mode (Web will warn you on startup that it is in safe mode)

    3. Use the steps above to re-install the add-in

    4. On the Authoring tab: set the Document Type Declaration option to HTML5

    5. On the Authoring tab: set the Secondary Schema options to HTML5

    Enjoy!

  10. Eric Stob says:

    can we get the CSS3 schemas too please?

  11. Robert C. Leif says:

    Can you do XHTML5? Can HTML5 and/or XHTML5 import an external schema and use elements derived from this external schema's data-types?

    I wish to create strongly typed web pages including forms. I suspect that HTML5-XHTML5 under Expression Web could become a very powerful tool for form development, which since it is based on W3C and other internet standards, could provide Adobe(R) Acrobat significant competition.

  12. dpowell says:

    Cool! Easy to follow and works as hoped. Thanks!

  13. David says:

    How about rewriting or removing this post altogether. You make us waste time pursuing something that is not needed as SP1 and SP2 supersede this anyway. So, say that! Next, your link-throughs are very poor. This is standard for MS, no use of "landing page" concepts by linking through to pages that do not actually have what you linked to for, or, it is embedded in a huge list of things not related to the link. Geesch!

  14. Nick says:

    Are there any plans to support SVG in the designer as Expression Blend does for xmal canvas?

  15. Dan Colasanti says:

    Hi Greg – with Microsoft no longer supporting the Expression tools, it seems that they also removed the Expression Gallery which hosted your HTML5 Add-in.  Is there another place (e.g. your OneDrive folder) from where I can download your add-in?

    Thanks…

    Dan

    @DanColasanti

  16. Manage Add-ins Blank says:

    Now what? I figured out how to get to the Manage Add-ins dialog box but there is nothing listed. I need to install the service pack I guess but how?

  17. You don't need this anymore says:

    "This Add-in is now superseded by Expression Web 4 SP1! Service Pack 1 adds many more features than just HTML 5 intellisense, including support for the CSS3 draft specification! If you've downloaded this HTML 5 Add-In the past, it's no longer needed and can be be removed."