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 "applicatio n/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

5129

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 (LiveHttpHeader s).

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

Similar topics

2600

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 print to the browser which includes some data displayed and edittable in <FORM> elements. There are a couple areas where I display a message or a calculated total to the user based on the initial values of some data elements. I would like to...

Javascript

9157

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

2866

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. Can anyone suggest any improvements to this (below)? I'm a JS beginner. It seems to work Camino/Firefox and Mac Explorer-5, but not in Safari. I haven't been able to test it in

Javascript

2649

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 directly. so I need a way doing this. so I check to see if the ifp value is null and if so then assign it a value. is this correct?

Javascript

1423

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, I'm refering to this: http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-html.html So far, I've seen a lot of people mention MSHTML or the Web Browser

ASP.NET

1986

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 email related tags and all files have same exact format. I would like to generate reports in a web page based upon the content of these XML files but not sure where to start. I know how to make an individual XML file display in browser by linking a...

.NET Framework

1481

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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript">var v11 = + $0; var v12 = + $25; var v13 = + $75 var v14 = + $100; function f1()

Javascript

3011

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" content="text/html; charset=utf-8"/> <title></title>

Javascript

9423

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10219

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10049

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9998

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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9865

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8876

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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6675

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 then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5310

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 last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

3567

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP