CSS for ‘Bad’ Markup from WYSIWYG Editors

February 22, 2006

by Heather at OMSH

Is your code ‘dirty’? If you use a WYSIWYG editor to manage your website content, you should consider cleaning out your html code using CSS. WYSIWYG editors will litter your website pages with ‘clutter code’ which will slow your page loads for your site visitors and also negatively impact your search engine ranking.

We understand WYSIWYG editors are handy for beginner coders who do not know how to code efficiently, but taking the time to learn how to create clean html markup will, in the long-term, alleviate some of the problems that bad markup can create for your site.

Dinosauric Font Tags or ‘Bloated Markup’

The Website Maintenance we do for our clients expose us to what we jokingly call Dinosauric Font Tags or ‘Bloated Markup’. It is our desire to help these dinosauric font tags reach extinction. If you have used a WYSIWYG editor long, you know how easy they make it to select colors, fonts, tables, etc… using the icon buttons on the tool bar. However, if you don’t view in html mode to remove excess ‘code’, what you end up doing is junking up your pages.

Before we had the ability to use CSS, which nests formatting within a single page to serve as a sort of online legend for all your pages, we were confined to using tags such as the <font> tag. Each time we needed to change formatting for our page content, text, and/or links, we were required to create a new set of page tags for each and every current tag. The result was bulky, inefficient, cluttered pages that were time-consuming to edit and slow to load. This leads us to our first lesson.

Lesson 1: Eliminating tags using CSS

Using CSS in place of <font> tags will reduce the amount of time it takes your pages to load because it will eliminate unnecessary characters within your html code, thereby creating a smaller, more efficient web page.

Here is an example of bad html markup from a popular WYSIWYG editor:

With CSS we can create the table format externally and in addition, when we need to modify any particular style, it can be done quickly and sitewide by ONE SINGLE UPDATE within the external CSS. The external CSS is called from the section in the html code and then it can be referenced throughout the part of your html code wherever needed. As you add more content, you either refer to the CSS already created or create new style settings for different areas.

And here is an example of the CSS we built to slim down and clean up the above code.

Placed within an external style sheet:

table {
font-family:verdana, arial, helvetica, sans-serif;
font-size:.8em;
font-weight: bold;
color: #000001
padding: 3px;
border: 2px color=”#FF9900″
}

Placed within the web page’s html code.

Not only is it nice and neat (and boy, do I love tidy, efficient code), but the difference in the character count is significant for faster page loads and for search engine optimization, as it allows the search engines to reach/read your content faster.

To read up on CSS, consider W3Schools’ FREE CSS Tutorial or SitePoint’s Client Side CSS Tutorials.

Next » Lesson 2: Divvying up the <div> tags.

Filed In: Basic HTML and CSS
Link to this Article: Permalink
Read Past Articles: Article Archives
Browse Past Articles by Category: Article Categories

I am Ready for a Web Site. What Now?

Navigate

Services

Information

Very Solutions

Resources

HELP Forums

CSS for ‘Bad’ Markup from WYSIWYG Editors

February 22, 2006

Dinosauric Font Tags or ‘Bloated Markup’

Lesson 1: Eliminating tags using CSS

I am Ready for a Web Site. What Now?