Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 163 lines (136 sloc) 7.536 kb
ca0aa95 Armin Ronacher 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
5 will notice that in many situations when end tags are optional they are
6 not used to keep the HTML cleaner and also faster to load. Because there
7 is a lot of confusion about HTML and XHTML out there this document tries
8 to answer some of them.
9
10
11 History on XHTML
12 ----------------
13
14 For a while it looked like HTML was about to be replaced by XHTML.
15 However barely any websites on the internet are actually real XHTML (which
16 means XHTML processed with XML rules). There are a couple of reasons why
17 this is the case. It mostly has to do with Internet Explorer which does
18 not accept the XHTML mimetype to switch the browser into XML mode.
19 However this is really easy to bypass but barely anyone does that. This
20 probably has to do with the fact that XHTML is really painful.
21
22 Why is it painful? XML has very strict errorhandling. On a parsing error
23 the browser is supposed to show the user an ugly error message. Most of
24 the (X)HTML generation on the web is based on non-XML template engines
25 (such as Jinja, the one used in Flask) which do not protect you from
26 accidentally creating invalid HTML. There are XML based template engines
27 but they usually come with a larger runtime overhead and are not as
28 straightforward to use because they have to obey XML rules.
29
30 Now the majority of users assumed they were using XHTML though. The
31 reasons for that is that they sticked an XHTML doctype on top of the
32 document and self-closed all necessary tags (``<br>`` becomes ``<br/>`` or
33 ``<br></br>`` in XHTML). However even if the document properly validates
34 as XHTML there are still other things to keep in mind.
35
36 XHTML also changes the way you work with JavaScript because you now have
37 to use the namespaced DOM interface with the XHTML namespace to query for
38 HTML elements.
39
40 History of HTML5
41 ----------------
42
43 HTML5 was started in 2004 under the name Web Applications 1.0 by the
44 WHATWG (Apple, Mozilla, Opera) and the idea was to write a new and
45 improved specification of HTML based on actual browser behaviour instead
46 of behaviour that exists on the paper but could not be implemented
47 because of backwards compatibility with the already existing web.
48
49 For example in theory HTML4 ``<title/Hello/`` means exactly the same as
50 ``<title>Hello</title>`` but because existing websites are using
51 pseudo-XHTML which uses the Slash in different ways, this could not be
52 implemented properly.
53
54 In 2007 the specification was adopted as the basis of a new HTML
55 specification under the umbrella of the W3C. Currently it looks like
56 XHTML is losing traction, the XHTML 2 working group was disbanded and
57 HTML5 is being implemented by all major browser vendors.
58
59 HTML versus XHTML
60 -----------------
61
62 The following table gives you a quick overview of features available in
63 HTML 4.01, XHTML 1.1 and HTML5 (we are not looking at XHTML 1.0 here which
64 was superceeded by XHTML 1.1 or XHTML5 which is barely supported currently):
65
66 +-----------------------------------------+----------+----------+----------+
67 | | HTML4.01 | XHTML1.1 | HTML5 |
68 +=========================================+==========+==========+==========+
69 | ``<tag/value/`` == ``<tag>value</tag>`` | |Y| [1]_ | |N| | |N| |
70 +-----------------------------------------+----------+----------+----------+
71 | ``<br/>`` supported | |N| | |Y| | |Y| [2]_ |
72 +-----------------------------------------+----------+----------+----------+
73 | ``<script/>`` supported | |N| | |Y| | |N| |
74 +-----------------------------------------+----------+----------+----------+
75 | might be served as `text/html` | |Y| | |N| [3]_ | |Y| |
76 +-----------------------------------------+----------+----------+----------+
77 | might be served as | |N| | |Y| | |N| |
78 | `application/xml+html` | | | |
79 +-----------------------------------------+----------+----------+----------+
80 | strict error handling | |N| | |Y| | |N| |
81 +-----------------------------------------+----------+----------+----------+
82 | inline SVG | |N| | |Y| | |Y| |
83 +-----------------------------------------+----------+----------+----------+
84 | inline MathML | |N| | |Y| | |Y| |
85 +-----------------------------------------+----------+----------+----------+
86 | ``<video>`` tag | |N| | |N| | |Y| |
87 +-----------------------------------------+----------+----------+----------+
88 | ``<audio>`` tag | |N| | |N| | |Y| |
89 +-----------------------------------------+----------+----------+----------+
90 | New semantical tags like ``<article>`` | |N| | |N| | |Y| |
91 +-----------------------------------------+----------+----------+----------+
92
93 .. [1] Obscure feature inherited from SGML not supported by browsers
94 .. [2] For compatibility with XHTML generating server code for some
95 tags such as ``<br>``. Should not be used.
96 .. [3] XHTML 1.0 is the last XHTML standard that allows to be served
97 as `text/html` for backwards compatibility reasons.
98
99 .. |Y| image:: _static/yes.png
100 :alt: Yes
101 .. |N| image:: _static/no.png
102 :alt: No
103
104 What does Strict Mean?
105 ----------------------
106
107 HTML5 has strictly defined parsing rules, but it also specifies how a
108 browser should react to parsing errors. Some things people stumble upon
109 with HTML5 and older HTML standards is that browsers will accept some
110 things that still create the expected output even though it looks wrong
111 (eg: certain tags are missing or are not closed).
112
113 Some of that is caused by the error handling browsers use if they
114 encounter a markup error, others are actually specified. The following
115 things are optional in HTML5 by standard and have to be supported by
116 browsers (and are supported):
117
118 - ``<html>``, ``<head>`` or ``<body>``
119 - The closing tags for ``<p>``, ``<li>``, ``<dl>``, ``<dd>``, ``<tr>``,
120 ``<td>``, ``<th>``, ``<tbody>``, ``<thead>``, ``<tfoot>``.
121 - quotes for attribtues if they contain no whitespace and some
122 special chars that require quoting.
123
124 This means the following piece of HTML5 is perfectly valid:
125
126 .. sourcecode:: html
127
128 <!doctype html>
129 <title>Hello HTML5</title>
130 <div class=header>
131 <h1>Hello HTML5</h1>
132 <p class=tagline>HTML5 is awesome
133 </div>
134 <ul class=nav>
135 <li><a href=/index>Index</a>
136 <li><a href=/downloads>Downloads</a>
137 <li><a href=/about>About</a>
138 </ul>
139 <div class=body>
140 <h2>HTML5 is probably the future</h2>
141 <p>
142 There might be some other things around but in terms of
143 browser vendor support, HTML5 is hard to beat.
144 <dl>
145 <dt>Key 1
146 <dd>Value 1
147 <dt>Key 2
148 <dd>Value 2
149 </dl>
150 </div>
151
152
153 What should be used?
154 --------------------
155
156 Currently the answer is HTML5. There are very few reasons to use XHTML
157 with the latest development. There are some companies successfully using
158 actual XML and XSLT on the client side with fallbacks to server side HTML4
159 generation for browsers not supporting XML and XSLT but but it's not very
160 common. Now that MathML and SVG landed in HTML5 and with the sad support
161 for XHTML in Internet Explorer and many JavaScript libraries for most
162 applications no reasons remain to use XHTML.
Something went wrong with that request. Please try again.