Extensible HyperText Markup Language (XHTML) Laboratory of Intelligent Youn-Hee Han

Introduction To XHTML History of HTML HTML 2.0 (1996)  Internet Engineering Task Force (IETF) HTML Working Group HTML 3.2 (Jan. 1997, W3C Recommendation)  tag is added, which have introduced unnecessary complexity to the important task of separating HTML content (text) from its presentation (style). HTML 4.0 (first - Dec. 1997, second – April 1998, W3C Recommendation)  the introduction of style sheets (CSS) HTML 4.01 (Dec. 1999, W3C Recommendation)  W3C will not continue to develop HTML. Future W3C work will be focusing on XHTML XHTML 1.0 (Jan. 2000, W3C Recommendation)  the latest version of HTML  XHTML 1.0 reformulates HTML 4.01 in XML Web Programming2

Introduction To XHTML What Is XHTML? XHTML stands for EXtensible HyperText Markup Language XHTML is aimed to replace HTML XHTML is almost identical to HTML 4.01  XHTML is compatible with HTML  XHTML is a reformulation of HTML 4.01 in XML XHTML is a stricter and cleaner version of HTML XHTML is HTML defined as an XML application XHTML is a W3C Recommendation  W3C defines XHTML as the latest version of HTML XHTML consists of all the elements in HTML 4.01 combined with the syntax of XML. Web Programming3

XHTML – why? Why XHTML? We have reached a point where many pages on the WWW contain "bad" HTML Today's market consists of different browser technologies  some browsers run Internet on computers, and some browsers run Internet on mobile phones and hand helds.  All-types of browser do not have the resources or power to interpret a "bad" markup language.  참고 : XHTML gives you the opportunity to write "well-formed" documents now, that work in all browsers!!! Web Programming4 This is bad HTML Bad HTML

XHTML – why? Why XHTML? There are a lot of software tools for XML (XHTML) We can add a new markup element in XHTML documents  XHTML is extensible! Web Programming5 XHTML 의 필요를 느끼게 된 가장 큰 이유는 웹 콘텐츠가 전통적인 ' 컴퓨터 ' 를 벗어나 여러 가지 장치 ( 이동통신기기, 장애인을 위한 점자 & 음성브라우저 등...) 에서 이용되면서, 부정확한 HTML 을 해석하는데 많은 어려움이 생겨났기 때문입니다. 즉, 하나의 웹문서가 여러 가지 장치, 여러 가지 브라우저 에서 모두 그 내용 ( 콘텐츠 ) 를 제대로 이해하고 보여줄 수 있도록 할 필요성이 있는 시대가 이미 시작되었고, 그렇게 할 수 있도록 만들어주는 것이 XHTML 의 존재이유입니다. 인용 :

XHTML vs. HTML How To Get Ready For XHTML You can prepare yourself for XHTML by starting to write “strict HTML” XHTML is not very different from the HTML 4.01 standard In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER skip ending tags The Most Important Differences (from HTML 4.01) XHTML elements must be properly nested XHTML elements must be always closed XHTML elements must be in lowercase XHTML documents must have one root element  … Web Programming6

XHTML vs. HTML XHTML Elements must be properly nested In HTML, this is valid  This text is bold and italic In XHTML, all elements must be properly nested within each other  This text is bold and italic Common mistakes Web Programming7 Coffee Tea Black tea Green tea Milk Coffee Tea Black tea Green tea Milk

XHTML vs. HTML XHTML Elements must always be closed Non-empty elements must have an end tag.  This is a paragraph  This is another paragraph Empty Elements Must Also Be Closed Web Programming8 A break: A horizontal rule: An image: A break: A horizontal rule: An image:

XHTML Syntax More XHTML syntax rules Attribute names must be in lower case Attribute values must be quoted ("") Attribute minimization is forbidden The id attribute replaces the name attribute The XHTML DTD defines mandatory elements  All XHTML documents must have a DOCTYPE declaration. The html, head, title and body elements must be present.  This is a minimum XHTML document template  The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag. Web Programming9 Title goes here …

XHTML Syntax Wrong vs. Correct To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol. To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this  Web Programming10 wrongcorrect

XHTML DTD Is Mandatory An XHTML document consists of three main parts:  the DOCTYPE  the Head  the Body Note!!!  is first, element is mandatory!!! The basic document structure is: Web Programming

XHTML DTD The 3 Document Type Definitions DTD specifies the syntax of a web DTD specifies rules that apply to the markup of documents of a particular type, including a set of element and entity declarations. An XHTML DTD describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup. There are currently 3 XHTML document types:  STRICT  TRANSITIONAL  FRAMESET Web Programming12

XHTML DTD XHTML 1.0 Strict Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets. XHTML 1.0 Transitional (Recommendation) Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets Web Programming13 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

XHTML DTD XHTML 1.0 Frameset Use this when you want to use HTML Frames to partition the browser window into two or more frames. Web Programming14 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "

Block element vs. Inline element All HTML elements are naturally displayed in one of the following ways: Block takes up the full width available, with a new line before and after (display:block;) Inline takes up only as much width as it needs, and does not force new lines (display:inline;) Not displayed Some tags, like and are not visible (display:none;) In XHTML, inline element cannot be used without a block element!!! element has only block elements!!! Web Programming15

Block Element vs. Inline Element Block Elements  Your general-purpose box...  All headings  Paragraph,,  Lists (unordered, ordered and definition),,  List items, definition list terms, and definition list definitions  Tables  Indicates a block of preformatted code  An input form Web Programming16

Block Element vs. Inline Element Block Elements  Like an indented paragraph, meant for quoting passages of text Note: does not allow to have inline element without other block elements Web Programming17 Invalid!!! Valid!!!

Block Element vs. Inline Element Inline Elements  Your all-purpose inline element  Anchor, used for links (and also to mark specific targets on a page for direct linking)  Used to make your content strong, displayed as bold in most browsers, replaces the narrower  (bold) tag  Adds emphasis, but less strong than. Usually displayed as italic text, and replaces the old  (italic) tag Web Programming18

Block Element vs. Inline Element Inline Elements  Image  alt attribute should be specified.  The line-break is an odd case, as it's an inline element that forces a new line. However, as the text carries on the next line, it's not a block-level element.  Form input fields like and  Indicates an abbr.  Working much like the abbreviation Web Programming19

Type of Content & Character Set XHTML requires the type of content in element indicates the type of data sent to the browser. It is used by browsers to know what to do with the data that they receive, and what character set is used. Usage  Example Web Programming20

Some other rules for XHTML element is mandatory Other block element is not nested within a block without element xmlns=" is mandatory in element XHTML common rule specified by NAVER Web Programming21 any any Invalid!!! Valid!!!

XHTML Validation XHTML Example XHTML Validation Site Official Site  Web Programming22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " XHTML 연습 Hello, World!