Menu +

Search Posts

Doctypes in web source – html – webdesign

| : No comments

'doctypes':
http://www.alistapart.com/stories/doctype/

XHTML is HTML redesigned as XML.

The Most Important Differences from HTML:

Document Structure

  • XHTML DOCTYPE is mandatory
  • The xmlns attribute in <html> is mandatory
  • <html>, <head>, <title>, and <body> are mandatory

XHTML Elements

  • XHTML elements must be properly nested
  • XHTML elements must always be closed
  • XHTML elements must be in lowercase
  • XHTML documents must have one root element

XHTML Attributes

  • Attribute names must be in lower case
  • Attribute values must be quoted
  • Attribute minimization is forbidden

<!DOCTYPE ….> Is Mandatory

An XHTML document must have an XHTML DOCTYPE declaration.
A complete list of all the XHTML Doctypes is found in our HTML Tags Reference.
The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document.
This example shows an XHTML document with a minimum of required tags:
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title of document</title>
</head>

<body>
some content//
</body>

</html>

XHTML Elements Must Be Properly Nested

In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b>

XHTML Elements Must Always Be Closed

This is wrong:
<p>This is a paragraph
<p>This is another paragraph
This is correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>

Empty Elements Must Also Be Closed

This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML Elements Must Be In Lower Case

This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph</p>
</body>

XHTML Attribute Names Must Be In Lower Case

This is wrong:
<table WIDTH="100%">
This is correct:
<table width="100%">

Attribute Values Must Be Quoted

This is wrong:
<table width=100%>
This is correct:
<table width="100%">

Attribute Minimization Is Forbidden

Wrong:
<input type="checkbox" name="vehicle" value="car" checked />
Correct:
<input type="checkbox" name="vehicle" value="car" checked="checked" />

Wrong:
<input type="text" name="lastname" disabled />
Correct:
<input type="text" name="lastname" disabled="disabled" />

How to Convert from HTML to XHTML

  1. Add an XHTML <!DOCTYPE> to the first line of every page
  2. Add an xmlns attribute to the html element of every page
  3. Change all element names to lowercase
  4. Close all empty elements
  5. Change all attribute names to lowercase
  6. Quote all attribute values

Validate XHTML With The W3C Validator

Put your web address in the box below:

OVERSIGT OVER XHTML-KODER:
http://www.w3.org/2010/04/xhtml10-strict.html

Det anbefales at kopiere fra denne side:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

f.eks.
]]><span style="background-color: #d9e2c9; font-family: 'Courier New',Courier,monospace; font-size: 0.9em;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /></head> <body>  <p>… Your HTML content here …</p> </body></html>      </span>

]]><span style="color: #222222; font-family: monospace,serif; font-size: 18px; vertical-align: baseline;"><span style="color: #444444; font-family: Menlo,monospace; font-size: 15px; vertical-align: baseline;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span></span>

DOCTYPES THAT WORK

So what DOCTYPEs should we use? Glad you asked. The following complete DOCTYPEs are the ones we need:

HTML 4.01 STRICT, TRANSITIONAL, FRAMESET

]]><span style="color: #222222; font-family: monospace,serif; font-size: 18px; vertical-align: baseline;"><span style="color: #444444; font-family: Menlo,monospace; font-size: 15px; vertical-align: baseline;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd"></span></span>

XHTML 1.0 STRICT, TRANSITIONAL, FRAMESET

]]><span style="color: #222222; font-family: monospace,serif; font-size: 18px; vertical-align: baseline;"><span style="color: #444444; font-family: Menlo,monospace; font-size: 15px; vertical-align: baseline;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"></span></span>

XHTML 1.1 DTD

]]><span style="color: #222222; font-family: monospace,serif; font-size: 18px; vertical-align: baseline;"><span style="color: #444444; font-family: Menlo,monospace; font-size: 15px; vertical-align: baseline;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></span></span>

Dreamweaver-start skal ændres til: (http://alistapart.com/article/dreamweaver)
Kan ændres her:
Find the document called Default.html:
Windows: C:ProgramFilesMacromediaDreamweaver4
ConfigurationTemplatesDefault.html.
]]><span style="color: #222222; font-family: monospace,serif; font-size: 10px; vertical-align: baseline;"><htmlxml:lang="en" lang="en"><head><title>Untitled Document</title></head></span>
XHTML needs to change <br> to <br />.

  1. Open the file Image.js and modify line 21 from:
    “return ‘external image %E2%80%99%20+%20newURL%20+%20%E2%80%98’;”
    to this:
    “return ‘external image %E2%80%99%20+%20newURL%20+%20%E2%80%98’;”.

(punktum indsættes)

VALIDATOR:
http://validator.w3.org/

  1. Change return ”—” to return “—”

(bemærk gåseøjnene)
Do not be alarmed when it renders “ (left double quotation mark) as a dot. All will be well when you see it in the browser.

I stedet for <b> skal bruges <strong>

(dog vil <b> valideres ok)

I stedet for <i> skal bruges <em>

(dog vil <i> valideres ok)

Tegn abonnement på

BioNyt Videnskabens Verden (www.bionyt.dk) er Danmarks ældste populærvidenskabelige tidsskrift for naturvidenskab. Det er det eneste blad af sin art i Danmark, som er helliget international forskning inden for livsvidenskaberne.

Bladet bringer aktuelle, spændende forskningsnyheder inden for biologi, medicin og andre naturvidenskabelige områder som f.eks. klimaændringer, nanoteknologi, partikelfysik, astronomi, seksualitet, biologiske våben, ecstasy, evolutionsbiologi, kloning, fedme, søvnforskning, muligheden for liv på mars, influenzaepidemier, livets opståen osv.

Artiklerne roses for at gøre vanskeligt stof forståeligt, uden at den videnskabelige holdbarhed tabes.

PinLinkedInPrintYummly
Category: Uncategorized

Leave a Reply