1 / 28

HTML’s Transition to XHTML

HTML’s Transition to XHTML. XHTML XHTML is the next evolution of HTML Extensible HTML e X tensible based on XML (extensible markup language) XML like HTML is a markup language. So what’s different in XHTML ? Opening HTML element <html> with xmlns declaration

dana
Download Presentation

HTML’s Transition to XHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML’s Transition to XHTML

  2. XHTML XHTML is the next evolution of HTML Extensible HTML eXtensible based on XML (extensible markup language) XML like HTML is a markup language

  3. So what’s different in XHTML ? Opening HTML element <html> with xmlns declaration <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> Adding a <meta> content tag to specify the content encoding <meta http-equiv="content-type" content="text/html;charset=utf-8" /> XHTML requires all tags have closing tags Empty elements having closing < />

  4. First, what is XML? XML is used for structuring data XML allows for custom elements unlike HTML In XML we do not use the same elements we are used to using with HTML

  5. Custom elements are used in XML Custom element example: <element name> </element name>

  6. Empty elements in XML Empty elements will have only the closing tag <element name /> An empty element does not have any data in between the element tags since there is only a closing element tag

  7. Root element in XML The first line is referred to as the “root element” <anyname xmlns="URL goes here" lang="en" xml:lang="en"> <first_element_name> data can go here</first_element_name> <second_element_name> more data goes here</second_element_name> <third_element_name> and more here</third_element_name> </anyname>

  8. W3C.org states XML declaration is not required An XML declaration is not required in all XML documents; However XHTML document authors are strongly encouraged to use XML declarations in all their documents. Such a declaration is required when the character encoding of the document is other than the default UTF-8 or UTF-16 and no encoding was determined by a higher-level protocol. <?xml version="1.0" encoding="UTF-8"?>

  9. XHTML adds xmlns attribute <html xmlns=http://www.w3.org/1999/xhtml> (The xlmns attribute holds a unique identifier that determines the language you mean, for xhtml its "http://www.w3.org/1999/xhtml") XML uses the URL as a unique identifier for the language for this document, so you can create your own language (URL address does not have pertinent info, in other words there is no requirement that anything actually has to exist at the URL, just that the URL has to be unique for each language)

  10. XHTML root element The root element of the document must contain an xmlns declaration for the XHTML namespace [XMLNS]. The namespace for XHTML is defined to be http://www.w3.org/1999/xhtml. An example root element might look like: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> Use both the lang and xml:lang attributes when specifying the language of an element. The value of the xml:lang attribute takes precedence.

  11. An XML declaration is not required in all XML documents In this XHTML example, the XML declaration is included. <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="en" lang="en"> <head> <title>Virtual Library</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <p>Moved to <a href="http://example.org/">example.org</a>. </p> </body> </html>

  12. Adding a <meta> content tag to specify the content encoding <meta> tag goes right after the <head> element <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Welcome</title> </head> UTF-8 stands for Unicode Transformation Format-8. UTF-8 is the default encoding for XML.

  13. <meta http-equiv="content-type" content="text/html;charset=utf-8" /> The Document Character Set is used to promote interoperability, each HTML application specifies its document character set A document character set consists of: A repertoire A set of abstract characters and Code positions Each HTML document is a sequence of characters from the repertoire Names for character encodings are case-insensitive

  14. W3C.org recommendations for XML Character Encoding Historically, the character encoding of an HTML document is either specified by a web server via the charset parameter of the HTTP Content-Type header, or via a meta element in the document itself. In an XML document, the character encoding of the document is specified on the XML declaration For example: <?xml version="1.0" encoding="EUC-JP"?>

  15. Character Encoding According to the W3C.org… In order to portably present documents with specific character encodings, the best approach is to ensure that the web server provides the correct headers. If this is not possible, a document that wants to set its character encoding explicitly must include both the XML declaration an encoding declaration and a meta http-equiv statement Example: <?xml version="1.0" encoding="EUC-JP"?> <meta http-equiv="Content-type" content="text/html; charset=EUC-JP" />).

  16. Charset/Character encoding examples Commonly character encodings: ISO-8859-1 (also referred to as "Latin-1"; usable for most Western European languages) ISO-8859-5 (which supports Cyrillic) SHIFT_JIS (a Japanese encoding) EUC-JP (another Japanese encoding) UTF-8 (an encoding of ISO 10646 using a different number of bytes for different characters) (Names for character encodings are case-insensitive, so that for example "SHIFT_JIS", "Shift_JIS", and "shift_jis" are equivalent)

  17. XHTML What’s else is different? Empty elements having closing < /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <img src=“image.gif” alt=“The image” />

  18. XHTML requires all tags have closing tags Elements are required to have closing tags, if there is no closing tag then these empty tags should end in /> <br /> <img /> <meta /> Putting a space before /> is recommended not required For example: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <img src=“image.gif” alt=“The image” /> <br />

  19. XHTML 1.0 Strict Requirements Opening HTML tag <html> must be the first tag after the DOCTYPE Closing HTML tag </html> must be the last tag in the document All element names must be written with lowercase letters

  20. XHTML 1.0 Strict Requirements All opening tags must have closing tags If element is an empty tag must end with a space and then /> All attribute values must be surrounded by double quotes and must have values Don’t use & (ampersand character) in the content section Instead of & use the html entitity: &amp; Convert any other special characters to html entities

  21. Benefits to using XHTML More likely to work with future browsers and devices Better for aural screen readers and visually impaired devices Can be extended to include new markups XHTML is more current, better to go with the current versus using antiquated HTML

  22. Benefits to using XHTML XML data can be more easily translated into XHTML XHTML can more easily tie into third party software which understands XML XHTML is designed to be backwards compatible with older browsers

  23. Migrating from strict HTML 4.01 to XHTML 1.0 is fairly straightforward Always make sure to validate pages to check for conformance http://validator.w3.org

  24. http://validator.w3.org You can even add validation logo to show you passed To show your readers that you have taken the care to create an interoperable Web page, you may display this icon on any page that validates.

  25. Converting and Validating in DW Dreamweaver enables you to convert pages to desired version of HTML File>Convert Dreamweaver enables you to validate pages based on your documents DTD File>Validate>Markup

  26. Migrating websites to XHTML There are also third party tools that can help to convert whole websites to XHTML like http://tidy.sourceforge.net Can take non validating html and reformat/update the code so that it can validate Also can removes much of the legacy presentation code and replace with CSS

  27. Review of the benefits to always validating Web pages will work more consistently and on a wide variety of browsers and load faster Will be better supported on new devices being used to view web pages More accessible to the visually impaired who use aural screen readers and businesses required to be ADA compliant (<img> alt and src required for strict) Job security?

  28. XHTML specific required tags shown in bold for validation for XHTML 1.0 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>my page</title> </head> <body> <h1> welcome to my webpage </h1> </body> </html> -end of slides

More Related