Are you a beginner? First find out, what WYSIWYG is?
Cleaning up HTML markup in your content might be painful, but it pays off in the long run. I used to be a Webdeveloper. I have an aversness to wysiwyg editors (wysiwyg = What you see is what you get, for example CK and TinyIMCE). Wysiwyg is evil, especially those full blown up super editors. Don't get me wrong, I have a wysiwyg editor, to write my blogposts, but I use them only to easily create links, lists, paragraphs and headings. I've though seen some horrible code created by (probably) unexperienced users who have tried to "micro-design" their page using some wysiwyg editor. Understand: wysiwyg editors are not made to build complex design layouts in the content area of a CMS!
Advantage of meaningful HTML markup
Here are some reasons, why you should use clean HTML markup for your content and maybe not use all the features your wysiwyg editor provides you with.
Let's first have a look at some popular bad habits.
- Empty tags: (easily created with a wysiwyg editor!!)
<p>Here is some more text, maybe an introduction</p>
<p> <p>
<p>Here is text</p> - Inline CSS styles:
<p style="margin-top:0;">Here's my text</p> - Clear images:
<img src="clear.gif" width="1" height="16" /> - Missing closing tag:
<div><p>here is my text</div> or <br> - Font Tag:
<font size="5">My Heading</font> - Repetition:
Text indent 😉 - Layout Tables:
Sorry, no example here, but I'm sure you get the idea or checkout this website.
Let's have a look at why it's bad to actually use HTML like that
Breaking Corporate Identity: You are trying to define what the text looks like. You try to be the designer, but actually you are just the content editor. What if you want to adjust your design just a little bit. Somebody has to go through all the pages and make the changes to the pages. The beauty of CSS is, that you actually have a central style definition that defines every tiny detail of the look and feel of the site. By now all websites will rely on a central CSS file, you shouldn't worry about that, but you should worry about your wysiwyg editor and the markup it produces, resp. your users produce with it!
Maintainability: As said. If you want to change your design your content is not going to break the site: Image something like that: <p>Here is my text</p><table width="220">…</table> (this is actually for real!) When you change that layout and all the sudden the column is only 200 pixels wide.. The table will make sure that that column still remains 220 pixel!
Same content different output: Having design and content separated, will allow the output of the same content in different contexts. Simplest example is providing your website in a mobile version with a special mobile design. Having inline styles & definitions might totally break your design.
You might also use the raw content as XML for some applications. You better make sure your content is XHTML valid: <br> and other missing end tags will break that application and you will wonder why.
Accessibility: Again we don't know what device renders the page: It might be a normal browser, it could be a mobile browser or even a screen reader for handicaped users. Avoid using layout tables. It's old fashion and not very accessible. Use divs and CSS instead to provide flexible layouts. There are usecases to use table, for example when presenting tabular data! The W3C strongly recommends semantic markup. Consider the following markup: <p><b>My Title</b></p>. This is not going to be very meaning full for a screenreader. The screenreader could though make sense of <h4>My Title</h4>. The same principle applies also to layout tables!
HTML5 has more improvements for semantic/meaningful markup, as it provides a whole bunch of new tags.
SEO: Using h1 to h6 tags correctly. Google evaluates titles. Use title tags conservatively and only where it makes sense and is actually a title. Further the Loading time of your site will decrease: The CSS file gets cached by your browser. If you have all design instructions in your HTML they will need to be loaded on every page load, which opviously will slow down your site. Loading time of your page influences your Google Pagerank.
Conclusion – wysiwyg, yes or no?
After all, wysiwyg editors are a nice thing. You wouldn't be able to sell a CMS without some kind of editor or your content provides will rip off your head. If you are lucky you can go along with something like bueditor. Most likely though you'll have to provide your users with a real editor (and if you are on sharepoint you get a beast of an editor).
Provide a style guide! Make sure everybody who works in the CMS knows it. This ensures that your content is going to look the same. The style guide needs to be dummy proof so that people with less experience can find their way around. Make sure to provide meaningful styles: "Paragraph title", "Image caption", that people can use.
Constrain markup and editor. Your user doesn't need to know all options your editor could provide. Further you should also filter your content or show a notice when a user uses bad markup. For example when you detect inline styles you could display a message that tells the user that those inline styles are evil and won't be outputted.