Web Design All-in-One For Dummies, 2nd Edition
Book image
Explore Book Buy On Amazon

Most of the best code editors these days — whether you’re using a code-only editor or one with a WYSIWYG (“what you see is what you get”) view — automatically write web code for that conforms to HTML 4.01, XHTML 1.0, or HTML5 standards based on the document type definition (DTD) you select when creating your pages.

Where your code can start to unravel, however, is when you start hand-coding, hand-editing, and using any free code and scripts that you find online.

Another problem can happen when you start working with legacy HTML pages that still use some of the older HTML tags that have been deprecated (phased out) over the past several years. You might want to start coding your projects with HTML5 and use only XHTML or HTML 4.01 Transitional if you have a specific need to do so.

Alternatively, you can start with HTML 4.01 and then easily transition to XHTML or HTML5 code, at which point the stricter and newer rules of XHTML and HTML5 might make more sense to you. Make sure to use the version you choose consistently throughout your site.

One benefit of starting with HTML is that some tags and attributes are backward compatible with many older browsers, whereas XHTML and HTML5 are not supported in part or in full by many of the older browsers.

In addition, programs such as Dreamweaver and Expression web can code properly syntaxed semantic HTML, XHTML, and HTML5, but the programs aren’t human, so you need to intervene occasionally to ensure that the code is properly formatted and remains that way anytime you make alterations to your code by hand.

Review these rules for HTML, XHTML, and HTML5 and use the markup that best meets your needs.

HTML XHTML HTML5
Code structure must be ordered correctly, but forgotten tags may be forgiven and cause a page to fail acceptably, such as forgetting to close the </span> or <span class="code"><head></span> tag.</td> <td>All code elements must be closed and placed in the proper location hierarchically within the opening and closing <span class="code"><html></span> tags, as in<br /> <span class="code"><html></span><span class="code"><br /> </span><span class="code"><head>...</head></span><span class="code"><br /> </span><span class="code"><body>...</body></span><span class="code"><br /> </span><span class="code"></html></span></td> <td>Markup can be written in either HTML, XHTML, or a combo “polyglot markup” syntax that combines rules of HTML and XHTML.</td> </tr> <tr> <td>HTML files should have, but aren’t required to have, an HTML DOCTYPE declaration above the opening <span class="code"><html></span> tag.</td> <td>All XHTML files must include an XHTML DOCTYPE declaration above the opening <span class="code"><html></span> tag, as in<br /> <span class="code"><!DOCTYPE html</span><span class="code"><br /> </span><span class="code">PUBLIC “-//W3C//DTD XHTML 1.0</span><span class="code"><br /> </span><span class="code">Transitional//EN”</span><span class="code"><br /> </span><span class="code">“http://www.w3.org/TR/xhtml1/DTD/</span><span class="code"><br /> </span><span class="code">xhtml1-transitional.dtd”></span><span class="code"><br /> </span><span class="code"><head></span><span class="code"><br /> </span><span class="code"><title>Add your title here


...

HTML5 files require the simple HTML5 doctype declaration above the opening tag:
Tags can be written in either uppercase or lowercase, but lowercase is preferred, such as </span> instead of <span class="code"><TITLE></span>.</td> <td>Tags must always be written in all lowercase letters, as in <span class="code"><head></span>, <span class="code"><body></span>, and <span class="code"><p></span>.</td> <td>Tags and tag attributes should be written in all lowercase letters, as in <span class="code"><header></span>, <span class="code"><h2></span>, and <span class="code"><aside></span>.</td> </tr> <tr> <td>HTML cannot be an application of XML.</td> <td>XHTML takes advantage of XML.</td> <td>HTML5 is not an application of XML, but XHTML5 is the XML serialization of HTML5.</td> </tr> <tr> <td>Tags and objects can be improperly nested with little consequence, so <span class="code"><b><i>Citizen Kane</b></i></span> would still be displayed in bold and italics.</td> <td>Tags and objects must be properly nested to display accurately in a browser, so <span class="code"><strong><em>Marshmallows</strong></em></span> would be incorrect and <span class="code"><strong><em> Marshmallows</em></b></span> would be correct.</td> <td>Like XHTML, tags and objects should be nested correctly to display accurately in a browser.</td> </tr> <tr> <td>Tags needn’t always have closing tag elements, as with the <span class="code"><p></span>, <span class="code"><hr></span>, and <span class="code"><br></span> tags.</td> <td>All tags and objects must be properly closed. Tags that didn’t typically need to be closed in HTML should now be closed by placing a space and slash inside the tag, as in <span class="code"><br/></span>, <span class="code"><hr/></span>, and <span class="code"><img loading="lazy"/></span>. All other tags, such as <span class="code"><p></span>, <span class="code"><td></span>, and <span class="code"><li></span>, must also be properly closed.</td> <td>In HTML5, the <span class="code">/></span> used in XHTML to close tags is unnecessary for void elements (elements that don’t contain any content, such as <span class="code"><br></span>).</td> </tr> <tr> <td>Values inside attributes of tags can be written either with or without quotation marks, as in <span class="code"><img src=”images/ dog.png ”width=100 height=100></span> or <span class="code"><img src=”images/dog.png ”width=”100” height=”100”></span>.</td> <td>Values inside attributes of tags must be written inside quotation marks, as in <span class="code"><div id=”banner”></span> and <span class="code"><span class=”special”></span>.</td> <td>Values inside attributes of tags should be written inside quotation marks, as in <span class="code"><img src="images/logo.gif" width="100" height="25"></span>.</td> </tr> <tr> <td>Attributes can use shorthand to minimize the code that needs to be written when the value matches the desired option, as with <span class="code"><input disabled></span>.</td> <td>Attributes can no longer use shorthand and must always use the full syntax of the HTML code, as with <span class="code"><input disabled=”disabled”/></span>.</td> <td>Attributes should always use the full syntax of the HTML code and attributes, as with <span class="code"><input disabled=”disabled”/></span>.</td> </tr> <tr> <td>Objects use the name attribute, as in <span class="code"><img src=”max.jpg” name=”max”></span>.</td> <td>Objects use either the <span class="code">id</span> attribute instead of <span class="code">name</span>, as in <span class="code"><img src=”emily.jpg” id=”emily”></span> or use both the <span class="code">id</span> and the <span class="code">name</span> attributes together, as in <span class="code"><img src=”emily.jpg” id=”emily” name=”emily”></span> Using both <span class="code">name</span> and <span class="code">id</span> attributes together helps older browsers interpret and display HTML data.</td> <td>Objects should use both the <span class="code">id</span> and <span class="code">name</span> attributes together, as in <span class="code"><img src=”portugal.jpg” id=”portugal” name=”portugal”></span></td> </tr> </table> <p>XHTML and HTML5 follow a much stricter set of rules than HTML, but HTML5 is the current recommended standard for the web, and both XHTML and HTML5 have many benefits that HTML lacks.</p> <p>For instance, because of all its standards, some say XHTML — and HTML5 by extension — is easier to learn than HTML. Not only that, but XHTML is both XML- and XSL-ready and HTML5 offers more control over content and new features.</p> <p>Until you are able to test the validity of the code for compliance to the W3C recommended standards, as long as you tell your HTML/web editor to code in the desired markup language and pay attention to syntactical rules while making any code adjustments by hand, you should be able to code your pages properly.</p>

About This Article

This article is from the book:

About the book author:

Sue Jenkins is a working designer as well as a design trainer and author. Her design firm, Luckychair, provides design services for web, logo, and print. Sue has also created a series of training DVDs on popular Adobe design tools including Photoshop, Dreamweaver, and Illustrator.

This article can be found in the category: