XHTML Week Two Web Design

2 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

3 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

4 Standards XHTML is a web standard agreed by the W3C  Creates better structured code  Greater accessibility now and in the future  XHTML replaces HTML

5 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

6 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

7 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

8 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)

9 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

10 Transitional Used if you want to use presentational features of HTML in your page

11 Frameset Used if you want to use frames on your page

12 HTML Document Format Page Title OTHER HEAD DATA DISPLAYED CONTENT

13 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: are all incorrect tags and must not be used The code tag must now be used as follows:

14 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: Your Text What you must not do, is to close tags in the wrong order i.e. Your Text Although code in this form may be rendered using HTML, this is incorrect in the XHTML specification and would not be displayed correctly

15 Closing Tags All tags in XHTML must be closed Container tags are closed after the content they contain, e.g. if (whatever), important ) However, there are several which are standalone, non-container tags which do not get closed with a separate closing tag. The main three are:

16 Closing Tags 2 These non-container tags are closed within the actual tag itself:  Notice the space before the />  Not actually necessary in the XHTML specification (you could use ) but as well as being correct XHTML, it will also make the tag compatible with past browsers An example:

17 Attributes in quotation marks All attributes in XHTML must be quoted In HTML you could have used the following:  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:

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

20 Shortening Attributes Common practice in HTML to shorten some attributes Can’t be done with XHTML since it causes incompatibilities between browsers e.g. In XHTML, all shortened attributes must be given in their 'long' format e.g.

21 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: e.g. in XHTML: In XHTML the name attribute can now only be used with certain elements and no longer with <img… nor <a…

22 Validation Can use W3C service to validate your Web pages against the HTML and XHTML recommendations  Go to  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

Coding Tips Coding Clarity  Indentation  Comments Entities (special characters)

Indentation Indent your html structures for clarity, which is clearer? item one item two item one item two

25 Comments Good practice to include comments Provide indication of what each aspect of your code does/contains Enables easy access/modification for other developers Remember to comment your XHTML!

26 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 <  Others examples are & for ampersand, © for copyright and £ for ??

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

28 Further Reading XHTML The Extensible HyperText Markup Language (Second Edition)‏  XHTML Tutorial  XHTML.ORG  Introduction to XHTML, with eXamples  XHTML: The Clean Code Solution  XHTML Information and Resources  XHTML 1.1. Under discussion, the next version of XHTML involving modularization 