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> |