Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Xhtml validation


Published on

XHTML is more compatible with adaptive web software, like aural screen readers.
The syntax is almost exactly like HTML; if you know how to write in HTML 4.01 Strict, the transition is almost seamless. In fact, XHTML is backwards compatible. For More Visit -

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Xhtml validation

  1. 1. XHTML VALIDATION Design | Development | Marketing
  2. 2. GOALS By the end of this unit, you should understand … … the reasons for moving to XHTML. … how to use a DOCTYPE statement. … how to use the World Wide Web Consortium's Validator. … how to specify character encoding for a page. … the rules for HTML 4.01 Strict & XHTML 1.0. Design | Development | Marketing
  3. 3. WHY BOTHER WITH XHTML? HTML was working great … Why bother with XHTML?  We can create pages that work uniformly across browsers ("graceful decomposition").  We can create pages that work on mobile devices.  We can create pages that work with adaptive technology.  XHTML pages "play well" with CSS. Design | Development | Marketing
  4. 4. LOOKS ARE DECEIVING … Most browsers are very forgiving when it comes to display error- ridden HTML. The problem is that, although browsers might display that contains errors, they display the errors differently. Writing standards-compliant pages is the only way to guarantee some semblance of consistency. Design | Development | Marketing
  5. 5. SOME HISTORY Prior to HTML v4.0, what we called "HTML" was actually a mishmash of rules and design standards – each browser manufacturer had their own "version" of HTML. HTML 4.0/4.01 changed that – for the first time, industry leaders agreed on a standard model for HTML (structure) and CSS (style). XHTML blends the browser compatibility and popularity of HTML with extensibility of XML. Design | Development | Marketing
  6. 6. WHICH VERSION? Today, unless told otherwise, web browsers display pages as if those pages used old- style HTML. This is a problem, because there is little consistency among the browsers in how to display old-style HTML that contains errors. However, armed with standards-compliant XHTML, we can really unlock the power of web development. We just need to let the browser know we are using it … Design | Development | Marketing
  7. 7. THE DOCTYPE STATEMENT To help the browser understand the language in which we write a document, we can add a DOCTYPE statement at the top of our script (even before <html>). The DOCTYPE statement, technically called a Document Type Definition (DTD), instructs the browser to use a standards- compliant model for displaying your page. Design | Development | Marketing
  8. 8. DOCTYPE SYNTAX <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> A B C E A The ! specifies a Document Type Definition. This is NOT an HTML Element! B Specifies html as the root (first) element in the page. D C Declares that the standard (HTML 4.01 here) is publicly available. D Tells the browser which standard we’re using (HTML 4.01 here) and the human language we use in the page (EN – English). Everything in the quotes needs to be on the same line! E Points to the URL for the standard. Design | Development | Marketing
  9. 9. LET’S TRY ONE! Download the file n241IntroducingXHTMLAnd to your storage device. Decompress that file and then edit the file called lounge.html. Add the DOCTYPE (you copy the DOCTYPE from the file called doctype.txt. Open the file in a browser. Any difference? Design | Development | Marketing
  10. 10. VALIDATING WEB PAGES Sometimes, it’s a difficult process to detect the minor mistakes that can make your page non-compliant. Fortunately, the W3C has a tool that can help – the W3C Markup Validation Service: Design | Development | Marketing
  11. 11. LET’S TRY ONE! Open the W3C Validator: Use the “Validate by File Upload” option to validate the following file: lounge.html. Design | Development | Marketing
  12. 12. THE <IMG> ELEMENT’S ALT ATTRIBUTEThe rules of HTML 4.01 state that every <img> element must have an alt attribute. Why? Add an alt attribute to the drinks.gif image and validate your page again … Design | Development | Marketing
  13. 13. CHARACTER ENCODING In the previous validation, the Validator indicated that our page had no character encoding. What is character encoding? It “tells” the browser which character set to use in order to display the page – English, Chinese, Arabic, etc. To include a character encoding scheme, we will use a <meta> element … Design | Development | Marketing
  14. 14. THE <META> ELEMENT A <meta> element tells a browser information about the page. Here are some things a <meta> element can do:  It can set a character encoding scheme.  It can configure a browser re-direct to another page.  It can attract search engines. You can have multiple <meta> elements in a single HTML file. We nest the <meta> element inside the <head> element, before the <title>. Design | Development | Marketing
  15. 15. SPECIFYING CHARACTER ENCODING Add the following line above the <title> element in lounge.html. Then, run your page through the validator: <meta http-equiv = “Content-Type” content = “text/html; charset=ISO-8859-1”> Design | Development | Marketing
  16. 16. MOVING TO A STRICT DTD … Did you notice the word “Transitional” in DOCTYPE statement? It means that we are using a transitional DTD. The Transitional DTD allows for some legacy HTML code, but enforces basic rules of structure. The W3C created it to help those with huge websites that they needed to update. Those creating new websites should use a strict DTD. Design | Development | Marketing
  17. 17. LET’S TRY ONE! Change the DOCTYPE declaration in lounge.html to the declaration below. Then, run your page through the validator: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> Design | Development | Marketing
  18. 18. NESTING ELEMENTS According to the guidelines for HTML 4.01, Strict, you MUST nest inline elements, like the <img> element, inside a block level element. Nest the <img> element in lounge.html inside a <p> and then run your page through the validator … Design | Development | Marketing
  19. 19. CONGRATULATIONS! Now you can celebrate and say that you’ve joined the ranks of true Web Geeks by creating an HTML 4.01 Strict page! Now for some HTML 4.01 Strict rules … Design | Development | Marketing
  20. 20. RULES FOR HTML 4.01 STRICT The first line in an HTML 4.01 Strict document must be a DOCTYPE declaration. The <html> element must be the first line after the DOCTYPE declaration. A compliant page includes both <head> and <body> elements. A compliant page includes a <title> element, nested in the <head>. continued … Design | Development | Marketing
  21. 21. RULES FOR HTML 4.01 STRICT Nest ONLY block elements inside a <body> element; all inline elements need to be nested inside other block- level elements. Do NOT nest block-level elements inside inline elements. Do NOT nest block-level elements inside the <p> element. Only nest <li> elements inside the <ol> & the <ul> elements. continued … Design | Development | Marketing
  22. 22. RULES FOR HTML 4.01 STRICT You may nest text, inline or block-level elements inside the <li> element. The <blockquote> elements requires one or more block-level elements nested inside of it. Take care when nesting inline elements inside other inline elements:  NEVER nest an <a> element inside another <a> element.  NEVER nest any other element inside an empty element, like the <img> element.  Remember to close nested elements in the opposite way that you opened them! Design | Development | Marketing
  23. 23. MOVING TO XHTML … XHTML – eXtensible HTML – is the “next evolution” of HTML. XHTML is actually a form of eXtensible Markup Language (XML), which allows developers to extend existing scripting languages and create new languages to fit their business needs. Let’s consider a sample XML document … Design | Development | Marketing
  24. 24. <recipe xmlns=“”<recipe xmlns=“” lang=“en” xml:lang=“en”>lang=“en” xml:lang=“en”> <name>Head First Lounge Iced Tea</name><name>Head First Lounge Iced Tea</name> <description><description> A brisk iced tea with a bit of a kick ...A brisk iced tea with a bit of a kick ... </description></description> <ingredients><ingredients> <ingredient measurement=“6 cups”><ingredient measurement=“6 cups”> WaterWater </ingredient></ingredient> ...... </ingredients></ingredients> <preparation><preparation> <time duration=“10 minutes” /><time duration=“10 minutes” /> <step><step> Boil one cup of water in a pan, remove pan ...Boil one cup of water in a pan, remove pan ... </step></step> ...... </preparation></preparation> </recipe></recipe> Sample XML ScriptSample XML Script Design | Development | Marketing
  25. 25. WHY MOVE TO XHTML? XHTML is more compatible with adaptive web software, like aural screen readers. The syntax is almost exactly like HTML; if you know how to write in HTML 4.01 Strict, the transition is almost seamless. In fact, XHTML is backwards compatible. XHTML is more compatible with mobile web agents like cell phones and PDAs. continued … Design | Development | Marketing
  26. 26. WHY MOVE TO XHTML? Because XHTML is XML, you write new markup for it; there are already extensions to XHTML for vector graphics and mathematics. Any software that can read XML can read XHTML. Many large databases store data using XML; transitioning to XHTML will be easier than HTML. Since XHTML is XML, we reap the benefits of XML, including the ability to store large, structured documents. Design | Development | Marketing
  27. 27. LET’S TRY ONE! Change the DOCTYPE declaration in lounge.html to the declaration below. DON’T run your page through the validator, just yet! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> Design | Development | Marketing
  28. 28. ALMOST THERE … Change the <html> element in lounge.html to add the attributes below. Then, run your page through the validator. <html xmlns="" lang="en" xml:lang="en"> Design | Development | Marketing
  29. 29. CLOSING EMPTY TAGS We already know that any paired element contains two tags – an opening tag and a closing tag. XHTML, however, requires that you also close empty elements. To close an empty element (like <img> or <meta> use " />" at the end of the tag name, like this: <meta /> Update lounge.html and then validate … Design | Development | Marketing
  30. 30. RULES FOR XHTML The <html> element must include xmlns, lang and xml:lang attributes. The <html> element must be the first tag after the DOCTYPE declaration. Write element names in lowercase. Close empty elements with a space and then a /, like this <tag />. continued … Design | Development | Marketing
  31. 31. RULES FOR XHTML Enclose attribute values in double quotes, like this: <tag attribute = "value"> Attribute values must not be empty. Use entities in the place of the & character and other special characters. See the following URL for entity codes: Design | Development | Marketing
  32. 32. TIPS FOR DEBUGGING Pay close attention to the line number the validator returns; don't stress over the exact error message. When the validator returns multiple errors, correct one error at a time, starting with the top error. Then, re-validate. Design | Development | Marketing
  33. 33. CONTACT US validation | Design | Development | Marketing