Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 208 lines (173 sloc) 9.673 kb
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
1 HTML/XHTML FAQ
2 ==============
3
4 The Flask documentation and example applications are using HTML5. You
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
5 may notice that in many situations, when end tags are optional they are
6 not used, so that the HTML is cleaner and faster to load. Because there
7 is much confusion about HTML and XHTML among developers, this document tries
8 to answer some of the major questions.
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
9
10
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
11 History of XHTML
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
12 ----------------
13
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
14 For a while, it appeared that HTML was about to be replaced by XHTML.
15 However, barely any websites on the Internet are actual XHTML (which is
16 HTML processed using XML rules). There are a couple of major reasons
17 why this is the case. One of them is Internet Explorer's lack of proper
18 XHTML support. The XHTML spec states that XHTML must be served with the MIME
19 type `application/xhtml+xml`, but Internet Explorer refuses to read files
20 with that MIME type.
21 While it is relatively easy to configure Web servers to serve XHTML properly,
22 few people do. This is likely because properly using XHTML can be quite
23 painful.
24
25 One of the most important causes of pain is XML's draconian (strict and
26 ruthless) error handling. When an XML parsing error is encountered,
27 the browser is supposed to show the user an ugly error message, instead
28 of attempting to recover from the error and display what it can. Most of
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
29 the (X)HTML generation on the web is based on non-XML template engines
30 (such as Jinja, the one used in Flask) which do not protect you from
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
31 accidentally creating invalid XHTML. There are XML based template engines,
32 such as Kid and the popular Genshi, but they often come with a larger
33 runtime overhead and, are not as straightforward to use because they have
34 to obey XML rules.
35
36 The majority of users, however, assumed they were properly using XHTML.
37 They wrote an XHTML doctype at the top of the document and self-closed all
38 the necessary tags (``<br>`` becomes ``<br/>`` or ``<br></br>`` in XHTML).
39 However, even if the document properly validates as XHTML, what really
40 determines XHTML/HTML processing in browsers is the MIME type, which as
41 said before is often not set properly. So the valid XHTML was being treated
42 as invalid HTML.
43
44 XHTML also changed the way JavaScript is used. To properly work with XHTML,
45 programmers have to use the namespaced DOM interface with the XHTML
46 namespace to query for HTML elements.
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
47
48 History of HTML5
49 ----------------
50
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
51 Development of the HTML5 specification was started in 2004 under the name
52 "Web Applications 1.0" by the Web Hypertext Application Technology Working
53 Group, or WHATWG (which was formed by the major browser vendors Apple,
54 Mozilla, and Opera) with the goal of writing a new and improved HTML
55 specification, based on existing browser behaviour instead of unrealistic
56 and backwards-incompatible specifications.
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
57
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
58 For example, in HTML4 ``<title/Hello/`` theoretically parses exactly the
59 same as ``<title>Hello</title>``. However, since people were using
60 XHTML-like tags along the lines of ``<link />``, browser vendors implemented
61 the XHTML syntax over the syntax defined by the specification.
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
62
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
63 In 2007, the specification was adopted as the basis of a new HTML
64 specification under the umbrella of the W3C, known as HTML5. Currently,
65 it appears that XHTML is losing traction, as the XHTML 2 working group has
9ecb9ed @florentx Typos
florentx authored
66 been disbanded and HTML5 is being implemented by all major browser vendors.
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
67
68 HTML versus XHTML
69 -----------------
70
71 The following table gives you a quick overview of features available in
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
72 HTML 4.01, XHTML 1.1 and HTML5. (XHTML 1.0 is not included, as it was
73 superseded by XHTML 1.1 and the barely-used XHTML5.)
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
74
235d693 @mitsuhiko Fixed tabularcolumns
authored
75 .. tabularcolumns:: |p{9cm}|p{2cm}|p{2cm}|p{2cm}|
76
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
77 +-----------------------------------------+----------+----------+----------+
78 | | HTML4.01 | XHTML1.1 | HTML5 |
79 +=========================================+==========+==========+==========+
80 | ``<tag/value/`` == ``<tag>value</tag>`` | |Y| [1]_ | |N| | |N| |
81 +-----------------------------------------+----------+----------+----------+
82 | ``<br/>`` supported | |N| | |Y| | |Y| [2]_ |
83 +-----------------------------------------+----------+----------+----------+
84 | ``<script/>`` supported | |N| | |Y| | |N| |
85 +-----------------------------------------+----------+----------+----------+
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
86 | should be served as `text/html` | |Y| | |N| [3]_ | |Y| |
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
87 +-----------------------------------------+----------+----------+----------+
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
88 | should be served as | |N| | |Y| | |N| |
89 | `application/xhtml+xml` | | | |
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
90 +-----------------------------------------+----------+----------+----------+
91 | strict error handling | |N| | |Y| | |N| |
92 +-----------------------------------------+----------+----------+----------+
93 | inline SVG | |N| | |Y| | |Y| |
94 +-----------------------------------------+----------+----------+----------+
95 | inline MathML | |N| | |Y| | |Y| |
96 +-----------------------------------------+----------+----------+----------+
97 | ``<video>`` tag | |N| | |N| | |Y| |
98 +-----------------------------------------+----------+----------+----------+
99 | ``<audio>`` tag | |N| | |N| | |Y| |
100 +-----------------------------------------+----------+----------+----------+
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
101 | New semantic tags like ``<article>`` | |N| | |N| | |Y| |
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
102 +-----------------------------------------+----------+----------+----------+
103
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
104 .. [1] This is an obscure feature inherited from SGML. It is usually not
105 supported by browsers, for reasons detailed above.
106 .. [2] This is for compatibility with server code that generates XHTML for
107 tags such as ``<br>``. It should not be used in new code.
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
108 .. [3] XHTML 1.0 is the last XHTML standard that allows to be served
109 as `text/html` for backwards compatibility reasons.
110
111 .. |Y| image:: _static/yes.png
112 :alt: Yes
113 .. |N| image:: _static/no.png
114 :alt: No
115
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
116 What does "strict" mean?
117 ------------------------
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
118
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
119 HTML5 has strictly defined parsing rules, but it also specifies exactly
120 how a browser should react to parsing errors - unlike XHTML, which simply
121 states parsing should abort. Some people are confused by apparently
122 invalid syntax that still generates the expected results (for example,
123 missing end tags or unquoted attribute values).
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
124
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
125 Some of these work because of the lenient error handling most browsers use
126 when they encounter a markup error, others are actually specified. The
127 following constructs are optional in HTML5 by standard, but have to be
128 supported by browsers:
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
129
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
130 - Wrapping the document in an ``<html>`` tag
131 - Wrapping header elements in ``<head>`` or the body elements in
132 ``<body>``
cb660cd @mitsuhiko Fixed a typo in the html faq
authored
133 - Closing the ``<p>``, ``<li>``, ``<dt>``, ``<dd>``, ``<tr>``,
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
134 ``<td>``, ``<th>``, ``<tbody>``, ``<thead>``, or ``<tfoot>`` tags.
135 - Quoting attributes, so long as they contain no whitespace or
136 special characters (like ``<``, ``>``, ``'``, or ``"``).
137 - Requiring boolean attributes to have a value.
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
138
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
139 This means the following page in HTML5 is perfectly valid:
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
140
141 .. sourcecode:: html
142
143 <!doctype html>
144 <title>Hello HTML5</title>
145 <div class=header>
146 <h1>Hello HTML5</h1>
147 <p class=tagline>HTML5 is awesome
148 </div>
149 <ul class=nav>
150 <li><a href=/index>Index</a>
151 <li><a href=/downloads>Downloads</a>
152 <li><a href=/about>About</a>
153 </ul>
154 <div class=body>
155 <h2>HTML5 is probably the future</h2>
156 <p>
157 There might be some other things around but in terms of
158 browser vendor support, HTML5 is hard to beat.
159 <dl>
160 <dt>Key 1
161 <dd>Value 1
162 <dt>Key 2
163 <dd>Value 2
164 </dl>
165 </div>
166
167
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
168 New technologies in HTML5
169 -------------------------
170
171 HTML5 adds many new features that make Web applications easier to write
172 and to use.
173
174 - The ``<audio>`` and ``<video>`` tags provide a way to embed audio and
54d22f1 @SimonSapin Typo fix. That is what was meant, right?
SimonSapin authored
175 video without complicated add-ons like QuickTime or Flash.
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
176 - Semantic elements like ``<article>``, ``<header>``, ``<nav>``, and
177 ``<time>`` that make content easier to understand.
178 - The ``<canvas>`` tag, which supports a powerful drawing API, reducing
179 the need for server-generated images to present data graphically.
180 - New form control types like ``<input type="date">`` that allow user
181 agents to make entering and validating values easier.
182 - Advanced JavaScript APIs like Web Storage, Web Workers, Web Sockets,
183 geolocation, and offline applications.
184
185 Many other features have been added, as well. A good guide to new features
3e2a211 @mitsuhiko into -> Into
authored
186 in HTML5 is Mark Pilgrim's soon-to-be-published book, `Dive Into HTML5`_.
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
187 Not all of them are supported in browsers yet, however, so use caution.
188
3e2a211 @mitsuhiko into -> Into
authored
189 .. _Dive Into HTML5: http://www.diveintohtml5.org/
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
190
ca0aa95 @mitsuhiko Added an HTML FAQ document, first draft.
authored
191 What should be used?
192 --------------------
193
5a5a4a8 @mitsuhiko Applied leafstorm's html5faq patch
authored
194 Currently, the answer is HTML5. There are very few reasons to use XHTML
195 considering the latest developments in Web browsers. To summarize the
196 reasons given above:
197
198 - Internet Explorer (which, sadly, currently leads in market share)
199 has poor support for XHTML.
200 - Many JavaScript libraries also do not support XHTML, due to the more
201 complicated namespacing API it requires.
202 - HTML5 adds several new features, including semantic tags and the
203 long-awaited ``<audio>`` and ``<video>`` tags.
204 - It has the support of most browser vendors behind it.
205 - It is much easier to write, and more compact.
206
9ecb9ed @florentx Typos
florentx authored
207 For most applications, it is undoubtedly better to use HTML5 than XHTML.
Something went wrong with that request. Please try again.