How to Write Semantic HTML Code - dummies

By Sue Jenkins

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 <title> or
<head> tag.
All code elements must be closed and placed in the proper
location hierarchically within the opening and closing <html> tags, as in
<html>
<head>…</head>
<body>…</body>
</html>
Markup can be written in either HTML, XHTML, or a combo
“polyglot markup” syntax that combines rules of HTML and
XHTML.
HTML files should have, but aren’t required to have, an
HTML DOCTYPE declaration above the opening <html> tag.
All XHTML files must include an XHTML DOCTYPE declaration above
the opening <html> tag, as in
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML
1.0

Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd”>
<head>
<title>Add your title
here</title>

</head>
<body>

</body>
</html>
HTML5 files require the simple HTML5 doctype declaration above the opening <html> tag:
<!doctype html>
Tags can be written in either uppercase or lowercase, but
lowercase is preferred, such as <title> instead of <TITLE>.
Tags must always be written in all lowercase letters, as in
<head>, <body>, and <p>.
Tags and tag attributes should be written in all lowercase
letters, as in <header>, <h2>, and <aside>.
HTML cannot be an application of XML. XHTML takes advantage of XML. HTML5 is not an application of XML, but XHTML5 is the XML
serialization of HTML5.
Tags and objects can be improperly nested with little
consequence, so <b><i>Citizen
Kane</b></i>
would still be displayed in bold
and italics.
Tags and objects must be properly nested to display accurately
in a browser, so <strong><em>Marshmallows</strong></em>
would be incorrect and <strong><em>
Marshmallows</em></b>
would be correct.
Like XHTML, tags and objects should be nested correctly to
display accurately in a browser.
Tags needn’t always have closing tag elements, as with
the <p>, <hr>, and <br> tags.
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 <br/>, <hr/>, and <img/>. All other tags, such as <p>, <td>, and <li>, must also be properly closed.
In HTML5, the /> used in XHTML to
close tags is unnecessary for void elements (elements that
don’t contain any content, such as <br>).
Values inside attributes of tags can be written either with or
without quotation marks, as in <img
src=”images/ dog.png ”width=100 height=100>
or
<img src=”images/dog.png
”width=”100” height=”100”>
.
Values inside attributes of tags must be written inside
quotation marks, as in <div
id=”banner”>
and <span
class=”special”>
.
Values inside attributes of tags should be written inside
quotation marks, as in <img
src=”images/logo.gif” width=”100″ height=”25″>
.
Attributes can use shorthand to minimize the code that needs to
be written when the value matches the desired option, as with <input disabled>.
Attributes can no longer use shorthand and must always use the
full syntax of the HTML code, as with <input
disabled=”disabled”/>
.
Attributes should always use the full syntax of the HTML code
and attributes, as with <input
disabled=”disabled”/>
.
Objects use the name attribute, as in <img src=”max.jpg”
name=”max”>
.
Objects use either the id attribute
instead of name, as in <img src=”emily.jpg”
id=”emily”>
or use both the id and the name
attributes together, as in <img
src=”emily.jpg” id=”emily”
name=”emily”>
Using both name and id
attributes together helps older browsers interpret and display HTML
data.
Objects should use both the id and
name attributes together, as in <img src=”portugal.jpg”
id=”portugal” name=”portugal”>

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.

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.

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.