Web Writing Tips - Cleaning HTML

[REW Fergus]

Here is a convenient list of HTML entities. Just make sure you ignore the numeric codes that come up when you mouse over the boxes.

I'm going to expand on this since I was the one who told Gerry that people shouldn't use the numeric entites and instead should use the named entities. Using Gerry's example of the a-acute, it can be specified as &aacute; or &<number symbol>193; (I can't use the actual "#" symbol in that code because the forum software will interpret a numeric entity inside a post).

The reason I want to discourage people from using the numerical representation is that it is only valid for one character set. If you move to an environment where that character set is not supported or if you fail to properly define a character set for your document, it may produce a completely different character than you expect.

The named entities should always function as expected, so they're safer. They're also a lot easier to remember.

You should still have intuitive line breaks like this:

<h1>Yummy Hommous Recipe</h1>
<p>However you spell hummus, its ingredients remain simple!:</p>
<ul>
<li>Cooked chick peas</li>
<li>Freshly squeezed lemon juice</li>
<li>Fresh parsley</li>
<li>Tahini or other nutty paste</li>
<li>Roasted red pepper (optional)</li>
<li>Olive oil (use liberally)</li>
<li>Fresh garlic</li>
</ul>

I would also recommend showing containment relationships with white space. In the above example, the <ul> (un-ordered list) tag contains the <li> (list item) tags. So I would do this:

<h1>Yummy Hommous Recipe</h1>
<p>However you spell hummus, its ingredients remain simple!:</p>
<ul>
    <li>Cooked chick peas</li>
    <li>Freshly squeezed lemon juice</li>
    <li>Fresh parsley</li>
    <li>Tahini or other nutty paste</li>
    <li>Roasted red pepper (optional)</li>
    <li>Olive oil (use liberally)</li>
    <li>Fresh garlic</li>
</ul>

[Aaron]

Care to cite your sources on this? I know lots of high ranking pages with code bloat, including a few of my own..

Your right Bob, Lots of sites that rank well have really bloated code. Inline CSS, scripts,tags in capital letters...etc. This does not mean that they could use some clean HTML code.

I was unable to find any solid evidence that search engines don't like bloated code. But it would make sense to me that if they had to parse through a bunch of unnecessary html code that it would make it harder to pick up the text that you want them to find.

I think the general Idea here is to produce clean and structured HTML.

Would you not agree that it is a good idea to create clean and concise HTML when making a web page?

[sdhomes]

Would you not agree that it is a good idea to create clean and concise HTML when making a web page?

Absolutely. I am only taking issue with the inference that it can hurt you. The only authoritative voices I have heard on this issue are Tim Mayer of yahoo and Matt Cutts of Google who have both stated unequivocally that their engines are very good at dealing with bad code. Bloated code is minor in comparison. In fact if you looked at many of the authoritative papers on .edu sites, they tend to be word docs uploaded to a server. Those pages have code that is not only bloated, but doesnt validate as well.

[webmaster]

Code bloat becomes an issue only when you have so much source code for the bot to deal with that they reach their upper limit (That they are willing to parse for a page) and then anything below that will not get spidered, last I heard it was 101k - Now if you have a page near 101k URL's in html are probably the least of your worries, but lets look at a post that "could" happen -

Start fake post -
My page has over 150k of source and the search engines will not spider the entire page, what are some ways in which I can optimize my page to reduce the amount of source code so that my content and links at the end of my code are within the spidering limits of the bot?

Fake answer -
Taking a look at your website, here are just a few things you can do to reduce your code size.

CSS - your current CSS is onpage (Inline) recommend moving to an external style sheet and sourcing from header.

Javascript - you have an insane amount of javascript onpage that does not be there, move all possible code to a .js file, and for god sakes find a better application to run those dropdowns as that code is way to complicated for what it is doing

Link sourcing - you are linking to all your internal links using your full URL, there is no need to do this as browsers will interpret the link as belonging to your domain, so just link to /filename.html or /folder/filename.html etc

Whitespace - for some reason you have a crazy amount of whitespace between your code, I would lose that editor - open up your page and delete all the extra whitespaces in your souce, carriage returns etc do increase filesize.

End fake answer.

Anyways, its quibbling over semantics but best practices are best practices and will never result in having to make such a post.

[Gerry]

So, does anyone else have suggestions to add to my list?
I'm hoping people will post questions like, "I found this code in my Word doc...can I remove it without breaking anything?"

[Gerry]

The initial post in this thread advised that inexperienced html'ers could probably get rid of <span> tags in basic situations - however, I edited that post today after realizing that some WYSIWYG's (Dreamweaver 8's in my own experience) sometimes place global css in a document.

I guess my point is, it's not as safe as I'd thought to recklessly dispose of <span> tags.