How To Write Standards-Based Web Pages
Writing standards-based content for the Web is easier than ever if you use a good visual editor such as the WordPress tinymce editor. I have found that whether I am writing content for my blog and web site or for publication elsewhere on the Web, I can forget about such things as line breaks tags and entity names and focus on what I am trying to convey. I let the visual editor convert my text to standards-based HTML or XHTML for display on the Web. The WordPress editor can even make the XHTML code I use in my tutorials display properly in my posts.
WordPress makes such code presentable by using entity names for text characters that might confuse a browser into thinking the text is really XHTML code. This means, for example, that I no longer have to search for each “<” and “>” character and replace them with entity names: WordPress will replace these characters in the HTML code to “<” and “>” that won’t confuse a browser—and do it automatically!
I often use Adobe Dreamweaver when writing articles for the Web. Dreamweaver has a Design mode that brings up a text input box in which to enter text in a visual mode, like the WordPress Post editor. I have also optioned Dreamweaver to alert me whenever a character should be converted to a special entity name when I run Dreamweaver’s “Validate markup” check. However, if you want to save yourself some $400 for the price of a web-design package like Dreamweaver, you can simply use the WordPress editor to type in your text, copy the generated XHTML displayed when the HTML tab is selected, and then paste this XHTML code into your favorite free or inexpensive text editor. My practice is to paste the generated XHTML code between the <body></body> tags of a skeletal web page. Let me illustrate how this works.
I pasted the skeletal XHTML page shown below into the WordPress Post text box so that you would have a starting point for this tutorial. Wordpress made the necessary entity-name substitutions so that your browser could display it as text. Copy and paste the skeletal XHTML page into a basic text editor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
You should also be able to paste the skeletal page into the W3C validator, hit the “check” button, and see the page pass the “in the green.”
WordPress does the appropriate entity-name substitutions in the code it generates. You can view the generated code by clicking the HTML tab in the editor. The code looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Copy this converted text and paste it into your text editor between the <body></body> tags of the previous skeletal XHTML page. You can paste the entire text document into the validator again and will see that it passes validation “in the green.”
If you save the text document with an “.html” file extension instead of the usual “.txt” extension, you can open the file in a browser and view it as a web page. What you will see is the lines of the skeletal web page displayed as lines of text which run together. This is so because the converted text lines you pasted into the text document are not separated by line break tags(<br />).
I solve this problem by doing a search and replace with my text editor. I replace every carriage return between the body tags of the “.html” file with a carriage return plus a line break. This can be done quickly and effeciently in most basic text editors. The final “.html” file should look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<title>Untitled Document</title><br />
</head><br />
<body><br />
</body><br />
</html><br />
</body>
</html>
You can copy and paste this code into your text editor and save it with the “.html” extension. It should not only display properly but should also pass the W3C validator “in the green.”
You can use your visual editor to create (X)HTML templates which include all of the meta tags (between the <head></head> tags) that search engines like to see, such as keywords and description. If you do this and test your pages at W3C, you can be confident that your pages will pass the W3C validator “in the green” when they are published online.
Tags: Dreamweaver, entity names, html, tinymce, validator, W3C, WordPress, xhtml