What an (X)HTML document should look like

8,658 Recognized Expert Moderator Expert

Lately I have seen so much awful HTML, that I like to show what a HTML document should look like, regarding the requirements from the W3C.

the absolute minimum is defined as:

An HTML 4 document is composed of three parts:
a line containing HTML version information,

a declarative header section (delimited by the HEAD element),

a body, which contains the document's actual content. The body may be implemented by the BODY element or the FRAMESET element.

or expressed in code:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">

<HTML>

   <HEAD>

      <TITLE>My first HTML document</TITLE>

   </HEAD>

   <BODY>
 
   </BODY>

</HTML>

note that the page title is a required HTML Element!

From my experiences there is at least one additional element, you absolutely should use: the "content-type" meta element.
Not only does it provide the browser with the HTML MIME type, it also tells it about the used character encoding (while this may be of no concern to english content, it is a concern to anyone whose language uses more than the ASCII characters (e.g. Chinese, Japanese and other Asian languages, European languages (nearly every european language besides English and Italian, e.g. French (é, à, û, ç), German (ä, ö, ü, ß), etc.), Languages using cyrillic (and related) characters (e.g. Russian), Arabic languages and many more). And there is usually more than one character set for a language…

OK, back to topic. This is the HTML template that I use for coding (variables in curly braces)

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="{en}">

    <head>

        <meta http-equiv="content-type" content="text/html;charset={utf-8}">

        <title>{your page title}</title>

        <link rel="stylesheet" href="{your.css}" media="screen">

        <style type="text/css">
 {your CSS definitions}

        </style>

        <script type="text/javascript" src="{your.js}"></script>

        <script type="text/javascript">
 {your JavaScript code}

        </script>

    </head>

    <body>
 
    </body>

</html>

additional notes:

some earlier browsers required the script content to be wrapped in comment tags (), so that the content is not displayed. Any decent browser nowadays knows the difference between <head> and <body>, so this is not necessary anymore.
HTML element names may be written upper or lower case. However, I recommend lower case.

Of course there is another upcoming HTML variant: XHTML. before I get to the code, one word of caution: Internet Explorer does not support native XHTML (there are some hacks, though)
however, since XHTML is a subset of XML, it is recommended to us an XHTML Media Type (probably due to the compatibility issues (mainly with IE)), which is "application/xhtml+xml".

IMPORTANT: if you serve your XHTML with the "text/html" mediatype, it is not treated as XHTML at all. It is then processed as HTML, which makes the effort of writing XHTML futile.

Naturally, there are also requirements for XHTML (including a HTML/XHTML comparison).

This is my XHTML template, which is not intended to be HTML compatible (in the first place), thus using the somewhat more restrictive XHTML 1.1 subset. (To serve these files to IE, I use a server script to transform it into HTML.)

Expand|Select|Wrap|Line Numbers

 <?xml version="1.0" encoding="{ISO-8859-1}" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{en}">

    <head>

        <meta http-equiv="content-type" content="application/xhtml+xml;charset={ISO-8859-1}"/>

        <title>{your page title}</title>

        <link rel="stylesheet" href="{your.css}" media="screen"/>

        <style type="text/css">

/* <![CDATA[ */
 {your CSS definitions}

/* ]]> */

        </style>

        <script type="text/javascript" src="{your.js}"></script>

        <script type="text/javascript">

// <![CDATA[
 {your JavaScript code}

// ]]>        

        </script>

    </head>

    <body>
 
    </body>

</html>

additional notes:

in contrast to HTML, XHTML files are checked for validaty by the browser (the XML parser, to be exact). If your document is neither well-formed nor valid (or both), you are prompted with an error message.
if—and only if—you use the UTF-8 or UTF-16 charset, you may omit the XML prolog (it’s the default encoding)
using " />" (with a leading space) for the empty element tag should be used when you’re writing HTML compatible XHTML*.
XHTML element names must be written in lower case.
the CDATA sections in <script> and <style> are required to keep the document valid**.
the <body> element itself does not allow for plain text and inline elements***.

* but in this case you could write HTML as well…
** due to XML restrictions
*** as defined in the DTD

thanks for your attention so far and happy copy/paste

PS don’t forget to save the document in that encoding you defined in the document.

Oct 27 '09 #1

Subscribe Reply

5104

AmberJain

884

Recognized Expert Contributor

Nice article.

I'm "not" a HTML expert....but when I try to validate your code in this article on w3c's HTML validation service (http://validator.w3.org/, it returns some errors/warnings. Can you please elaborate on this? I'm designing a small personal website and I'm planning to use this article as a reference as I don't know much HTML.

Thanks.

Dec 15 '09 #2

Dormilich

8,658

Recognized Expert Moderator Expert

not sure, which you mean. the only note I get is due to the validation method. direct input validation automaticly uses UTF-8 and gives a warning if you constrain the charset value to something different as well as a note telling about that.

the HTML template throws an error, because I omitted the body content (which is not part of the template).

and of course you have to remove the curly braces…

PS. and of course you can’t get the XHTML to run in IE…

Dec 15 '09 #3

AmberJain

884

Recognized Expert Contributor

@Dormilich
Oops....my bad. I never read those error messages carefully but then I don't know much HTML either. I must agree though that I should have atleast identified that 'curly braces' error.

If 'body' is empty, why is this flagged as error? Or is it just that specification doesnot allows body to be empty.

Nevermind my previous reply now.

Anyways, when are you going to move this (and many other articles) to insights section. Many of your articles are nicely done but they are still in writing room. Is writing room visible in Google search results?

PS. and of course you can’t get the XHTML to run in IE…

Does Internet Explorer works natively on Linux(Ubuntu) and BSD (OpenBSD)? ;-)
I'm using firefox on both of my *nix boxes.

Thanks.

Dec 15 '09 #4

AmberJain

884

Recognized Expert Contributor

@Dormilich
me too.

EDIT: A few days ago, the HTML of my personal website was a good example of 'awful' HTML.

Dec 15 '09 #5

Dormilich

8,658

Recognized Expert Moderator Expert

@ambrnewlearner
excerpt from the DTDs
XHTML:

Expand|Select|Wrap|Line Numbers

<!ELEMENT body %Block;>

this requires a block level element child (%Block; is the replacement group for the block elements).

HTML:

Expand|Select|Wrap|Line Numbers

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->

not sure what the controls are for, but basicly it’s the same, except that you can choose between <script> and block level elements.

@ambrnewlearner
I wish I knew, but there’s currently no chief editor and if there’s no response, you don’t know if there may be an error left.

@ambrnewlearner
*rofl* that's a good one…
ahem… no (and I hope it stays this way)

Dec 15 '09 #6

drhowarddrfine

7,435

Recognized Expert Expert

The xml declaration, the first line shown in the example, is entirely correct, however IE<8 does not know what to do with it and goes into quirks mode. Since most people don't serve XHTML as XHTML, that line can be safely removed.

The charset does not have to be set in the meta tag if it's sent in the http headers. Most servers do this but the validator will flag it as an error if it's not in the html. Some programs may look at the meta tag to determine the charset, too, but you'd be aware of that if it did.

Little known factoid: the html, body and head tags are optional.

Dec 18 '09 #7

Dormilich

8,658

Recognized Expert Moderator Expert

talking about IE issues would require an article of its own…

Experience shows, that that not every server sends the correct charset. and usually you don’t know, whether your server does it correct or at all.

therefore, the least problematic charset is UTF-8, because in most cases it is the default.

Little known factoid: the html, body and head tags are optional.

care to prove?

Dec 18 '09 #8

drhowarddrfine

7,435

Recognized Expert Expert

Experience shows, that that not every server sends the correct charset. and usually you don’t know, whether your server does it correct or at all.

It's easy enough to see what the server is sending using many online tools or extensions in Firefox (LiveHttpHeaders).

care to prove?

W3C Index of Elements

Dec 20 '09 #9

Ashwani Sharma

New Member

"<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->"

What's the meaning of this code?? When and where we can use this code.

Ashwani Sharma

Feb 24 '10 #10

drhowarddrfine

7,435

Recognized Expert Expert

With HTML, you don't. That is a line of a DTD for HTML describing, in this case, the body element. In XML and XHTML, DTDs may be written for custom elements but that's another topic and another forum.

Feb 24 '10 #11

Ashwani Sharma

New Member

Thanks for your support Drhowarddrfine :)

Feb 24 '10 #12

Similar topics

2581

understanding what i can do with onChange

by: dan baker | last post by:

I am pretty much a newbie with javascript, and would like to get a little clarification on what I can do with an onChange javascript event handler. I have a dynamic page I build with perl and...

Javascript

9076

Table Layout and What's Wrong With it

by: Neal | last post by:

Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.

HTML / CSS

2846

test/comments? show/hiding HTML elements by className

by: Sam | last post by:

I wrote a script to show or hide items in an HTML list (<ul id="stuff">) depending on whether a list-item's CLASS attribute matches an input string (catString), which is chosen from a SELECT menu....

Javascript

2611

What am I doing wrong here. Simple statement. Novice Question.

by: Paul | last post by:

HI! I get an error with this code. <SCRIPT language="JavaScript"> If (ifp==""){ ifp="default.htm"} //--></SCRIPT> Basicly I want my iframe to have a default page if the user enters in...

Javascript

1414

Does W3 DOM Level 1 (HTML) Support on the .NET platform exist anywhere?

by: uv2003 | last post by:

Greetings, I've been searching for a way to use the W3 DOM Level 1 interfaces in a native .NET implementation without any luck. Does anyone know if something like this exists? Specifically,...

ASP.NET

1969

Generate html report from directory of XML docs

by: sysxperts | last post by:

Hi, I have a mail server that generates archives in a directory for every message sent or received and each archive has an associated XML file with <sender>, <receiver>, <subject> and other...

.NET Framework

1457

im a total noob, but still... what am i doing wrong?

by: plemon | last post by:

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

Javascript

2993

Load Body html on button click.

by: Sunny | last post by:

Hi, Can someone tell me, How to load the Body Html from a text file that contains javascript. to Manage my files I am creating an Index Page. <html> <head> <meta http-equiv="content-type"...

Javascript

7105

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

6967

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

7132

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

6846

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

5439

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

4870

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

4564

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

3076

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

1381

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp