XHTML

Download Report

Transcript XHTML 

XHTML
Week Two
Web Design
What is XHTML?

XHTML is the current standard for HTML

Newest generation of HTML (post-HTML 4) but has
many new features which mean that it is, in some
ways, like XML

XHTML stands for eXtensible HyperText Markup
language and is a cross between HTML and XML
2
Why Use XHTML?

XHTML was created for two reasons:

To create a stricter standard for marking web pages,
reducing incompatibilities between browsers

To create a standard that can be used on a variety of
different devices without change
3
Standards

XHTML is a web standard agreed by the W3C



Creates better structured code
Greater accessibility now and in the future
XHTML replaces HTML
4
The Main Differences

Several main changes in XHTML from HTML v.4.0:








All documents must have a Doctype
All tags must be in lower case
All tags must be nested correctly
All tags must be closed
All attributes must be quoted
Rules about block & inline elements are stricter
Attributes cannot be shortened
The name attribute has changed
5
The Doctype

The first change which will appear on your page is the
Doctype

When using HTML it was good practice to add a Doctype
to the beginning of the page

Although optional in HTML, XHTML requires you to add a
Doctype
6
DTD – Document Type Definition

The DTD defines how the XML (XHTML)
document should be structured – the rules
the document will adhere to.

The main definition building blocks are:
Elements
 Attributes (and the values they may have)
 Entities

7
Doctypes

There are three document type definitions available for
use:



Strict
Transitional
Frameset

The Doctype should be the very first line of your
document and should be the only thing on that line
 You don't need to worry about it confusing older
browsers because the Doctype is actually a comment
tag
 It is used to find out which code the page is written in
(but only by browsers/validators which support it)
8
Strict

Used mainly when the markup is very clean and there
is no 'extra' markup to aid the presentation of the
document
 Best applied if you are using Cascading Style Sheets
for presentation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
9
Transitional

Used if you want to use presentational features of
HTML in your page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
10
Frameset

Used if you want to use frames on your page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
11
HTML Document Format
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page Title</title>
OTHER HEAD DATA
</head>
<body>
DISPLAYED CONTENT
</body>
</html>
12
Lowercase


Probably the biggest change in XHTML (besides
the tags themselves) is that the way in which you
write them must be correct
In XHTML, tags must always be lower case

This means that:
<CODE>
<Code>
<CoDE>
are all incorrect tags and must not be used

The code tag must now be used as follows:
<code>
13
Nesting



Often need to apply several tags to a single element (e.g. text string)
Must open and close tags in the paired correct order (nesting)
For example, for bold red text in a paragraph, the correct nesting
would be any of the following:
<p><b><code>Your Text</code></b></p>
<p><code><b>Your Text<b></code></p>

What you must not do, is to close tags in the wrong order i.e.
<p><b><code>Your Text</p></code></b>

Although code in this form may be rendered using HTML, this is
incorrect in the XHTML specification and would not be displayed
correctly
14
Closing Tags



All tags in XHTML must be closed
Container tags are closed after the content they contain, e.g.
<code>if (whatever)</code>, <strong>important</strong>)
However, there are several which are standalone, non-container
tags which do not get closed with a separate closing tag.
The main three are:
<br>
<img>
<hr>
15
Closing Tags 2

These non-container tags are closed within the actual tag
itself:
<br />
<img />
<hr />


Notice the space before the />
Not actually necessary in the XHTML specification (you
could use <br/>) but as well as being correct XHTML, it will
also make the tag compatible with past browsers
An example:
<img src="myimage.gif" alt="My Image" width="400" height="300" />
16
Attributes in quotation marks

All attributes in XHTML must be quoted

In HTML you could have used the following: <td rowspan=3>

Gives no compatibility issues and would render okay

However, this is incorrect in XHTML coding

All attributes must be surrounded by quotes (")

Therefore, the correct format of this code would be:
<td rowspan=“3”>
17
Block & Inline elements
 Some
html elements always appear in
their own ‘block’, that is, on their own set
of lines:
 p,
table, div, ol, ul, dl, h1…h6
 These
are called block elements
 Some elements don’t go on a new line,
they’re called inline elements:
 img,
strong, span, em
Block & Inline rules
 All
inline elements must be in a block
element


So, you can’t just have some text, or an image or any inline
element unless it’s in a block – like a <p></p> for instance
Inline elements can’t contain block elements
 Not
all blocks can contain other blocks
 You
can’t put one block element inside another,
except:
a list item (li) can contain paragraphs
 td can contain paragraphs (p) and lists (ol, ul, dl)
 divs can contain anything, including other divs

Shortening Attributes

Common practice in HTML to shorten some attributes

Can’t be done with XHTML since it causes
incompatibilities between browsers e.g.


<input type="checkbox" value="yes" name="agree" checked>
In XHTML, all shortened attributes must be given in their
'long' format e.g.

<input type="checkbox" value="yes" name="agree" checked="checked" />
20
Show Me Some ID

Another significant change using XHTML involves tag
attributes

In HTML, the tag can have an attribute called ‘name’,
in XHTML you now use 'id' – which must be unique
e.g. in HTML: <img src="myimage.gif" name="my_image">
e.g. in XHTML: <img src="myimage.gif" id="my_image" />

In XHTML the name attribute can now only be used
with certain elements and no longer with <img… nor
<a…
21
Validation
 Can
use W3C service to validate your
Web pages against the HTML and XHTML
recommendations
 Go
to http://validator.w3.org/
 Enter your URL/file location in the text box

Can upload files from hard drive
 The
validation tool checks the syntax of
the document and ensures it is well
formed
22
Coding Tips
 Coding
Clarity
 Indentation
 Comments
 Entities
(special characters)
Indentation
Indent your html structures for clarity,
which is clearer?
<ol>
<li>item one</li>
<li>item two</li>
</ol>

<ol><li>item one</li><li>item two</li></ol>
Comments
 Good
practice to include comments
 Provide indication of what each aspect of
your code does/contains
 Enables easy access/modification for
other developers
<!-- Comments go here.
 Remember
-->
to comment your XHTML!
25
Special Characters - entities
 Certain
characters are reserved for special
use in XHTML e.g. <
 To be able to include these in a web page
you need the formula &code;
 i.e.
for the ‘less than’ symbol (i.e. <), substitute
the code &lt;
 Others examples are &amp; for ampersand,
&copy; for copyright and &pound; for ??
26
Summary

XHTML has superseded HTML





DOCTYPE definitions – Frames, Strict and Transitional
XHTML only accepts lowercase tags and attribute names
All attribute values must be quoted and no shortening is
allowed
All tags must be ended correctly
Web pages MUST be well formed


Check all syntax is correct
Validate!
27
Further Reading

XHTML 1.0 - The Extensible HyperText Markup Language (Second Edition)


XHTML Tutorial


http://www.oreillynet.com/pub/a/network/2000/04/28/feature/xhtml_rev.html
XHTML Information and Resources


http://www.wdvl.com/Authoring/Languages/XML/XHTML/
XHTML: The Clean Code Solution


http://www.xhtml.org/
Introduction to XHTML, with eXamples


http://www.htmldog.com/
XHTML.ORG


www.w3.org/TR/xhtml1/
http://www.websitetips.com/xhtml/
XHTML 1.1. Under discussion, the next version of XHTML involving modularization

http://www.w3.org/TR/xhtml11/
28