/usr/share/doc/python-flask-doc/html/htmlfaq.html is in python-flask-doc 0.10.1-2.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML/XHTML FAQ — Flask 0.10.1 documentation</title>
<link rel="stylesheet" href="_static/flasky.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: '',
VERSION: '0.10.1',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<link rel="top" title="Flask 0.10.1 documentation" href="index.html" />
<link rel="next" title="Security Considerations" href="security.html" />
<link rel="prev" title="Design Decisions in Flask" href="design.html" />
<link rel="apple-touch-icon" href="_static/touch-icon.png" />
<link media="only screen and (max-device-width: 480px)" href="_static/small_flask.css" type= "text/css" rel="stylesheet" />
</head>
<body>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
accesskey="I">index</a></li>
<li class="right" >
<a href="security.html" title="Security Considerations"
accesskey="N">next</a> |</li>
<li class="right" >
<a href="design.html" title="Design Decisions in Flask"
accesskey="P">previous</a> |</li>
<li><a href="index.html">Flask 0.10.1 documentation</a> »</li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body">
<div class="section" id="html-xhtml-faq">
<h1>HTML/XHTML FAQ<a class="headerlink" href="#html-xhtml-faq" title="Permalink to this headline">¶</a></h1>
<p>The Flask documentation and example applications are using HTML5. You
may notice that in many situations, when end tags are optional they are
not used, so that the HTML is cleaner and faster to load. Because there
is much confusion about HTML and XHTML among developers, this document tries
to answer some of the major questions.</p>
<div class="section" id="history-of-xhtml">
<h2>History of XHTML<a class="headerlink" href="#history-of-xhtml" title="Permalink to this headline">¶</a></h2>
<p>For a while, it appeared that HTML was about to be replaced by XHTML.
However, barely any websites on the Internet are actual XHTML (which is
HTML processed using XML rules). There are a couple of major reasons
why this is the case. One of them is Internet Explorer’s lack of proper
XHTML support. The XHTML spec states that XHTML must be served with the MIME
type <cite>application/xhtml+xml</cite>, but Internet Explorer refuses to read files
with that MIME type.
While it is relatively easy to configure Web servers to serve XHTML properly,
few people do. This is likely because properly using XHTML can be quite
painful.</p>
<p>One of the most important causes of pain is XML’s draconian (strict and
ruthless) error handling. When an XML parsing error is encountered,
the browser is supposed to show the user an ugly error message, instead
of attempting to recover from the error and display what it can. Most of
the (X)HTML generation on the web is based on non-XML template engines
(such as Jinja, the one used in Flask) which do not protect you from
accidentally creating invalid XHTML. There are XML based template engines,
such as Kid and the popular Genshi, but they often come with a larger
runtime overhead and, are not as straightforward to use because they have
to obey XML rules.</p>
<p>The majority of users, however, assumed they were properly using XHTML.
They wrote an XHTML doctype at the top of the document and self-closed all
the necessary tags (<tt class="docutils literal"><span class="pre"><br></span></tt> becomes <tt class="docutils literal"><span class="pre"><br/></span></tt> or <tt class="docutils literal"><span class="pre"><br></br></span></tt> in XHTML).
However, even if the document properly validates as XHTML, what really
determines XHTML/HTML processing in browsers is the MIME type, which as
said before is often not set properly. So the valid XHTML was being treated
as invalid HTML.</p>
<p>XHTML also changed the way JavaScript is used. To properly work with XHTML,
programmers have to use the namespaced DOM interface with the XHTML
namespace to query for HTML elements.</p>
</div>
<div class="section" id="history-of-html5">
<h2>History of HTML5<a class="headerlink" href="#history-of-html5" title="Permalink to this headline">¶</a></h2>
<p>Development of the HTML5 specification was started in 2004 under the name
“Web Applications 1.0” by the Web Hypertext Application Technology Working
Group, or WHATWG (which was formed by the major browser vendors Apple,
Mozilla, and Opera) with the goal of writing a new and improved HTML
specification, based on existing browser behavior instead of unrealistic
and backwards-incompatible specifications.</p>
<p>For example, in HTML4 <tt class="docutils literal"><span class="pre"><title/Hello/</span></tt> theoretically parses exactly the
same as <tt class="docutils literal"><span class="pre"><title>Hello</title></span></tt>. However, since people were using
XHTML-like tags along the lines of <tt class="docutils literal"><span class="pre"><link</span> <span class="pre">/></span></tt>, browser vendors implemented
the XHTML syntax over the syntax defined by the specification.</p>
<p>In 2007, the specification was adopted as the basis of a new HTML
specification under the umbrella of the W3C, known as HTML5. Currently,
it appears that XHTML is losing traction, as the XHTML 2 working group has
been disbanded and HTML5 is being implemented by all major browser vendors.</p>
</div>
<div class="section" id="html-versus-xhtml">
<h2>HTML versus XHTML<a class="headerlink" href="#html-versus-xhtml" title="Permalink to this headline">¶</a></h2>
<p>The following table gives you a quick overview of features available in
HTML 4.01, XHTML 1.1 and HTML5. (XHTML 1.0 is not included, as it was
superseded by XHTML 1.1 and the barely-used XHTML5.)</p>
<table border="1" class="docutils">
<colgroup>
<col width="58%" />
<col width="14%" />
<col width="14%" />
<col width="14%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head"> </th>
<th class="head">HTML4.01</th>
<th class="head">XHTML1.1</th>
<th class="head">HTML5</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td><tt class="docutils literal"><span class="pre"><tag/value/</span></tt> == <tt class="docutils literal"><span class="pre"><tag>value</tag></span></tt></td>
<td><img alt="Yes" src="_images/yes.png" /> <a class="footnote-reference" href="#id4" id="id1">[1]</a></td>
<td><img alt="No" src="_images/no.png" /></td>
<td><img alt="No" src="_images/no.png" /></td>
</tr>
<tr class="row-odd"><td><tt class="docutils literal"><span class="pre"><br/></span></tt> supported</td>
<td><img alt="No" src="_images/no.png" /></td>
<td><img alt="Yes" src="_images/yes.png" /></td>
<td><img alt="Yes" src="_images/yes.png" /> <a class="footnote-reference" href="#id5" id="id2">[2]</a></td>
</tr>
<tr class="row-even"><td><tt class="docutils literal"><span class="pre"><script/></span></tt> supported</td>
<td><img alt="No" src="_images/no.png" /></td>
<td><img alt="Yes" src="_images/yes.png" /></td>
<td><img alt="No" src="_images/no.png" /></td>
</tr>
<tr class="row-odd"><td>should be served as <cite>text/html</cite></td>
<td><img alt="Yes" src="_images/yes.png" /></td>
<td><img alt="No" src="_images/no.png" /> <a class="footnote-reference" href="#id6" id="id3">[3]</a></td>
<td><img alt="Yes" src="_images/yes.png" /></td>
</tr>
<tr class="row-even"><td>should be served as
<cite>application/xhtml+xml</cite></td>
<td><img alt="No" src="_images/no.png" /></td>
<td><img alt="Yes" src="_images/yes.png" /></td>
<td><img alt="No" src="_images/no.png" /></td>
</tr>
<tr class="row-odd"><td>strict error handling</td>
<td><img alt="No" src="_images/no.png" /></td>
<td><img alt="Yes" src="_images/yes.png" /></td>
<td><img alt="No" src="_images/no.png" /></td>
</tr>
<tr class="row-even"><td>inline SVG</td>
<td><img alt="No" src="_images/no.png" /></td>
<td><img alt="Yes" src="_images/yes.png" /></td>
<td><img alt="Yes" src="_images/yes.png" /></td>
</tr>
<tr class="row-odd"><td>inline MathML</td>
<td><img alt="No" src="_images/no.png" /></td>
<td><img alt="Yes" src="_images/yes.png" /></td>
<td><img alt="Yes" src="_images/yes.png" /></td>
</tr>
<tr class="row-even"><td><tt class="docutils literal"><span class="pre"><video></span></tt> tag</td>
<td><img alt="No" src="_images/no.png" /></td>
<td><img alt="No" src="_images/no.png" /></td>
<td><img alt="Yes" src="_images/yes.png" /></td>
</tr>
<tr class="row-odd"><td><tt class="docutils literal"><span class="pre"><audio></span></tt> tag</td>
<td><img alt="No" src="_images/no.png" /></td>
<td><img alt="No" src="_images/no.png" /></td>
<td><img alt="Yes" src="_images/yes.png" /></td>
</tr>
<tr class="row-even"><td>New semantic tags like <tt class="docutils literal"><span class="pre"><article></span></tt></td>
<td><img alt="No" src="_images/no.png" /></td>
<td><img alt="No" src="_images/no.png" /></td>
<td><img alt="Yes" src="_images/yes.png" /></td>
</tr>
</tbody>
</table>
<table class="docutils footnote" frame="void" id="id4" rules="none">
<colgroup><col class="label" /><col /></colgroup>
<tbody valign="top">
<tr><td class="label"><a class="fn-backref" href="#id1">[1]</a></td><td>This is an obscure feature inherited from SGML. It is usually not
supported by browsers, for reasons detailed above.</td></tr>
</tbody>
</table>
<table class="docutils footnote" frame="void" id="id5" rules="none">
<colgroup><col class="label" /><col /></colgroup>
<tbody valign="top">
<tr><td class="label"><a class="fn-backref" href="#id2">[2]</a></td><td>This is for compatibility with server code that generates XHTML for
tags such as <tt class="docutils literal"><span class="pre"><br></span></tt>. It should not be used in new code.</td></tr>
</tbody>
</table>
<table class="docutils footnote" frame="void" id="id6" rules="none">
<colgroup><col class="label" /><col /></colgroup>
<tbody valign="top">
<tr><td class="label"><a class="fn-backref" href="#id3">[3]</a></td><td>XHTML 1.0 is the last XHTML standard that allows to be served
as <cite>text/html</cite> for backwards compatibility reasons.</td></tr>
</tbody>
</table>
</div>
<div class="section" id="what-does-strict-mean">
<h2>What does “strict” mean?<a class="headerlink" href="#what-does-strict-mean" title="Permalink to this headline">¶</a></h2>
<p>HTML5 has strictly defined parsing rules, but it also specifies exactly
how a browser should react to parsing errors - unlike XHTML, which simply
states parsing should abort. Some people are confused by apparently
invalid syntax that still generates the expected results (for example,
missing end tags or unquoted attribute values).</p>
<p>Some of these work because of the lenient error handling most browsers use
when they encounter a markup error, others are actually specified. The
following constructs are optional in HTML5 by standard, but have to be
supported by browsers:</p>
<ul class="simple">
<li>Wrapping the document in an <tt class="docutils literal"><span class="pre"><html></span></tt> tag</li>
<li>Wrapping header elements in <tt class="docutils literal"><span class="pre"><head></span></tt> or the body elements in
<tt class="docutils literal"><span class="pre"><body></span></tt></li>
<li>Closing the <tt class="docutils literal"><span class="pre"><p></span></tt>, <tt class="docutils literal"><span class="pre"><li></span></tt>, <tt class="docutils literal"><span class="pre"><dt></span></tt>, <tt class="docutils literal"><span class="pre"><dd></span></tt>, <tt class="docutils literal"><span class="pre"><tr></span></tt>,
<tt class="docutils literal"><span class="pre"><td></span></tt>, <tt class="docutils literal"><span class="pre"><th></span></tt>, <tt class="docutils literal"><span class="pre"><tbody></span></tt>, <tt class="docutils literal"><span class="pre"><thead></span></tt>, or <tt class="docutils literal"><span class="pre"><tfoot></span></tt> tags.</li>
<li>Quoting attributes, so long as they contain no whitespace or
special characters (like <tt class="docutils literal"><span class="pre"><</span></tt>, <tt class="docutils literal"><span class="pre">></span></tt>, <tt class="docutils literal"><span class="pre">'</span></tt>, or <tt class="docutils literal"><span class="pre">"</span></tt>).</li>
<li>Requiring boolean attributes to have a value.</li>
</ul>
<p>This means the following page in HTML5 is perfectly valid:</p>
<div class="highlight-html"><div class="highlight"><pre><span class="cp"><!doctype html></span>
<span class="nt"><title></span>Hello HTML5<span class="nt"></title></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">header</span><span class="nt">></span>
<span class="nt"><h1></span>Hello HTML5<span class="nt"></h1></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">tagline</span><span class="nt">></span>HTML5 is awesome
<span class="nt"></div></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">nav</span><span class="nt">></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">/index</span><span class="nt">></span>Index<span class="nt"></a></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">/downloads</span><span class="nt">></span>Downloads<span class="nt"></a></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">/about</span><span class="nt">></span>About<span class="nt"></a></span>
<span class="nt"></ul></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">body</span><span class="nt">></span>
<span class="nt"><h2></span>HTML5 is probably the future<span class="nt"></h2></span>
<span class="nt"><p></span>
There might be some other things around but in terms of
browser vendor support, HTML5 is hard to beat.
<span class="nt"><dl></span>
<span class="nt"><dt></span>Key 1
<span class="nt"><dd></span>Value 1
<span class="nt"><dt></span>Key 2
<span class="nt"><dd></span>Value 2
<span class="nt"></dl></span>
<span class="nt"></div></span>
</pre></div>
</div>
</div>
<div class="section" id="new-technologies-in-html5">
<h2>New technologies in HTML5<a class="headerlink" href="#new-technologies-in-html5" title="Permalink to this headline">¶</a></h2>
<p>HTML5 adds many new features that make Web applications easier to write
and to use.</p>
<ul class="simple">
<li>The <tt class="docutils literal"><span class="pre"><audio></span></tt> and <tt class="docutils literal"><span class="pre"><video></span></tt> tags provide a way to embed audio and
video without complicated add-ons like QuickTime or Flash.</li>
<li>Semantic elements like <tt class="docutils literal"><span class="pre"><article></span></tt>, <tt class="docutils literal"><span class="pre"><header></span></tt>, <tt class="docutils literal"><span class="pre"><nav></span></tt>, and
<tt class="docutils literal"><span class="pre"><time></span></tt> that make content easier to understand.</li>
<li>The <tt class="docutils literal"><span class="pre"><canvas></span></tt> tag, which supports a powerful drawing API, reducing
the need for server-generated images to present data graphically.</li>
<li>New form control types like <tt class="docutils literal"><span class="pre"><input</span> <span class="pre">type="date"></span></tt> that allow user
agents to make entering and validating values easier.</li>
<li>Advanced JavaScript APIs like Web Storage, Web Workers, Web Sockets,
geolocation, and offline applications.</li>
</ul>
<p>Many other features have been added, as well. A good guide to new features
in HTML5 is Mark Pilgrim’s soon-to-be-published book, <a class="reference external" href="http://www.diveintohtml5.org/">Dive Into HTML5</a>.
Not all of them are supported in browsers yet, however, so use caution.</p>
</div>
<div class="section" id="what-should-be-used">
<h2>What should be used?<a class="headerlink" href="#what-should-be-used" title="Permalink to this headline">¶</a></h2>
<p>Currently, the answer is HTML5. There are very few reasons to use XHTML
considering the latest developments in Web browsers. To summarize the
reasons given above:</p>
<ul class="simple">
<li>Internet Explorer (which, sadly, currently leads in market share)
has poor support for XHTML.</li>
<li>Many JavaScript libraries also do not support XHTML, due to the more
complicated namespacing API it requires.</li>
<li>HTML5 adds several new features, including semantic tags and the
long-awaited <tt class="docutils literal"><span class="pre"><audio></span></tt> and <tt class="docutils literal"><span class="pre"><video></span></tt> tags.</li>
<li>It has the support of most browser vendors behind it.</li>
<li>It is much easier to write, and more compact.</li>
</ul>
<p>For most applications, it is undoubtedly better to use HTML5 than XHTML.</p>
</div>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar">
<div class="sphinxsidebarwrapper"><p class="logo"><a href="index.html">
<img class="logo" src="_static/flask.png" alt="Logo"/>
</a></p>
<h3><a href="index.html">Table Of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">HTML/XHTML FAQ</a><ul>
<li><a class="reference internal" href="#history-of-xhtml">History of XHTML</a></li>
<li><a class="reference internal" href="#history-of-html5">History of HTML5</a></li>
<li><a class="reference internal" href="#html-versus-xhtml">HTML versus XHTML</a></li>
<li><a class="reference internal" href="#what-does-strict-mean">What does “strict” mean?</a></li>
<li><a class="reference internal" href="#new-technologies-in-html5">New technologies in HTML5</a></li>
<li><a class="reference internal" href="#what-should-be-used">What should be used?</a></li>
</ul>
</li>
</ul>
<h3>Related Topics</h3>
<ul>
<li><a href="index.html">Documentation overview</a><ul>
<li>Previous: <a href="design.html" title="previous chapter">Design Decisions in Flask</a></li>
<li>Next: <a href="security.html" title="next chapter">Security Considerations</a></li>
</ul></li>
</ul>
<h3>This Page</h3>
<ul class="this-page-menu">
<li><a href="_sources/htmlfaq.txt"
rel="nofollow">Show Source</a></li>
</ul>
<div id="searchbox" style="display: none">
<h3>Quick search</h3>
<form class="search" action="search.html" method="get">
<input type="text" name="q" />
<input type="submit" value="Go" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
<p class="searchtip" style="font-size: 90%">
Enter search terms or a module, class or function name.
</p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="footer">
© Copyright 2013, Armin Ronacher.
Created using <a href="http://sphinx.pocoo.org/">Sphinx</a>.
</div>
</body>
</html>
|