Html – SharePoint Designer Reformatting HTML on the fly, able to disable

htmlsharepointsharepoint-designer

Before I tear what is left of my hair out I have been trying to modify some master pages in SharePoint Designer and whenever I make HTML markup changes it reformats them as it see's fit. For example, I am trying to make the code readable so I am moving items to their own lines and such. As soon as I save it moves everything back to a single line of code.

This was a problem that I had with VS2003 & VS2005, until VS2005 SP1. Unfortunately this makes it very cumbersome to ever read or decipher what the HTML markup is. Does anyone know how to disable this automatic reformatting of HTML in SharePoint Designer?

My alternative would be to use VS2008 but when attempting to load the SharePoint web site I recieve an error that Visual Web Developer cannot open SharePoint sites. So apparently that is a no go. Is there any alternative to SharePoint Designer or are you stuck with that and having it reform your markup at its leisure?

Thank you for your time.

Best Answer

I only use SharePoint Designer when I want to see the effect of a change (e.g. to a master page) immediately, without having to retract/deploy a solution just to do so.

While it takes longer, I author all my HTML in Visual Studio, and paste into SharePoint Designer if I need to. I NEVER paste from SharePoint Designer back into Visual Studio, since the tool tends to butcher the HTML and add to it just so it can open it.

Having said that, it's important to understand when (and when not) to use SharePoint Designer. You should be creating SharePoint Solutions for all your assets, e.g. master pages and CSS files.

If you open and edit one of these in SharePoint Designer, remember that you are unghosting/customizing them. This means that the file now lives in the content database instead of on disk. This might affect the performance of your website.

Also remember that SharePoint Designer doesn't understand server side code. So if you have a Page Layout that has a code behind, editing it in SharePoint Designer will break it.

Related Solutions

Html – What are valid values for the id attribute in HTML

For HTML 4, the answer is technically:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

HTML 5 is even more permissive, saying only that an id must contain at least one character and may not contain any space characters.

The id attribute is case sensitive in XHTML.

As a purely practical matter, you may want to avoid certain characters. Periods, colons and '#' have special meaning in CSS selectors, so you will have to escape those characters using a backslash in CSS or a double backslash in a selector string passed to jQuery. Think about how often you will have to escape a character in your stylesheets or code before you go crazy with periods and colons in ids.

For example, the HTML declaration <div id="first.name"></div> is valid. You can select that element in CSS as #first\.name and in jQuery like so: $('#first\\.name'). But if you forget the backslash, $('#first.name'), you will have a perfectly valid selector looking for an element with id first and also having class name. This is a bug that is easy to overlook. You might be happier in the long run choosing the id first-name (a hyphen rather than a period), instead.

You can simplify your development tasks by strictly sticking to a naming convention. For example, if you limit yourself entirely to lower-case characters and always separate words with either hyphens or underscores (but not both, pick one and never use the other), then you have an easy-to-remember pattern. You will never wonder "was it firstName or FirstName?" because you will always know that you should type first_name. Prefer camel case? Then limit yourself to that, no hyphens or underscores, and always, consistently use either upper-case or lower-case for the first character, don't mix them.

A now very obscure problem was that at least one browser, Netscape 6, incorrectly treated id attribute values as case-sensitive. That meant that if you had typed id="firstName" in your HTML (lower-case 'f') and #FirstName { color: red } in your CSS (upper-case 'F'), that buggy browser would have failed to set the element's color to red. At the time of this edit, April 2015, I hope you aren't being asked to support Netscape 6. Consider this a historical footnote.

Html – the difference between HTML tags
and

div is a block element
span is an inline element.

This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.

For example:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Note that it is illegal to place a block-level element within an inline element, so:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

...is illegal.

EDIT: As of HTML5, some block elements can be placed inside of some inline elements. See the MDN reference here for a pretty clear listing. The above is still illegal, as <span> only accepts phrasing content, and <div> is flow content.

You asked for some concrete examples, so is one taken from my bowling website, BowlSK:

<div id="header">
  <div id="userbar">
    Hi there, <span class="username">Chris Marasti-Georg</span> |
    <a href="/edit-profile.html">Profile</a> |
    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
  </div>
  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

Ok, what's going on?

At the top of my page, I have a logical section, the "header". Since this is a section, I use a div (with an appropriate id). Within that, I have a couple of sections: the user bar and the actual page title. The title uses the appropriate tag, h1. The userbar, being a section, is wrapped in a div. Within that, the username is wrapped in a span, so that I can change the style. As you can see, I have also wrapped a span around 2 letters in the title - this allows me to change their color in my stylesheet.

Also note that HTML5 includes a broad new set of elements that define common page structures, such as article, section, nav, etc.

Section 4.4 of the HTML 5 working draft lists them and gives hints as to their usage. HTML5 is still a working spec, so nothing is "final" yet, but it is highly doubtful that any of these elements are going anywhere. There is a javascript hack that you will need to use if you want to style these elements in some older version of IE - You need to create one of each element using document.createElement before any of those elements are specified in your source. There are a bunch of libraries that will take care of this for you - a quick Google search turned up html5shiv.