New page for devel/website
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1
Hi,
the long-term goal for the Debian website is to comply to the XHTML
standard. I thought that maybe it could be a good idea to create a page on
which the most common mistakes/pitfalls etc. are listed when writing XHTML.
This document is intended as a short reference only. If someone wants to
have a look at the whole standard, there are of course appropriate links to
the W3C.
I also suggest to add a link to this new page in two locations, namely
index.wml and desc.wml. Please see the attached diff for details. The
second attached file contains the wml-code for the proposed new page, which
should probably be called proper_xhtml.wml (or the like).
I'd like to hear some thoughts before committing.
Cheers,
- --
Tobias
In the beginning, there was nothing. And God said, "Let there be
Light." And there was still nothing, but you could see a bit better.
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.2.4 (GNU/Linux)
iD8DBQFBK2GuCqqEJ0Fs8twRAhgCAJ9dt+xo+aVRjPT+HQZKkZIEtqOgsQCfUZEh
0YKOLzlXXI4Oybzc8Q5+GKw=
=7ZVI
-----END PGP SIGNATURE-----
Index: desc.wml
===================================================================
RCS file: /cvs/webwml/webwml/english/devel/website/desc.wml,v
retrieving revision 1.24
diff -b -u -r1.24 desc.wml
--- desc.wml 10 May 2004 15:22:53 -0000 1.24
+++ desc.wml 24 Aug 2004 15:27:42 -0000
@@ -58,7 +58,8 @@
to move on to <a href="http://www.w3.org/TR/xhtml1/";>XHTML</a>, however, so
all web editors are strongly encouraged to write the HTML tags in lowercase,
place ending tags where appropriate, etc., in order to make the transition
-as smooth as possible.
+as smooth as possible. You're invited to have a look at a more complete
+<a href="proper_xhtml">overview of XHTML 1.0</a>.</p>
<p>Anyone who is working on a lot of pages should install WML so they can
test to make sure the result is what they want. If you are running Debian,
Index: index.wml
===================================================================
RCS file: /cvs/webwml/webwml/english/devel/website/index.wml,v
retrieving revision 1.14
diff -b -u -r1.14 index.wml
--- index.wml 19 May 2003 12:30:31 -0000 1.14
+++ index.wml 24 Aug 2004 15:27:42 -0000
@@ -24,6 +24,7 @@
<ul>
<li><a href="using_cvs">how to use CVS</a>
<li><a href="using_wml">how to use WML</a>
+ <li><a href="proper_xhtml">how to write proper XHTML</a>
<li><a href="todo">the to-do list</a>
</ul>
<li><a href="translating">translating pages</a>
#use wml::debian::template title="How to write proper XHTML"
#use wml::debian::toc
# $Id$
<toc-display/>
<hrline>
<toc-add-entry name="general">General information</toc-add-entry>
<p>Our web pages currently comply to the
<a href="http://www.w3.org/TR/html4/";>HTML 4.01 Transitional</a> standard.
We intend to move on to <a href="http://www.w3.org/TR/xhtml1/";>XHTML</a>,
however, so all web editors are strongly encouraged to closely follow the
guidelines below.</p>
<toc-add-entry name="lowercase">All tags and attributes have
to be lowercase</toc-add-entry>
<p>In XHTML, it's not allowed to use <code><A HREF="url"></code>.
You must instead write <code><a href="url"></code>. Of course,
it's still possible to use mixed-case for the values of an attribute,
e.g. <code><a href="Document.rtf"></code>.</p>
<p>Example for HTML 4.01:</p>
<pre>
<TABLE WIDTH="100%">
</pre>
<p>Example for XHTML:</p>
<pre>
<table width="100%">
</pre>
<toc-add-entry name="emptytags">Empty tags must be closed</toc-add-entry>
<p>There are some tags in HTML which can be empty, i.e. they have no
content between the opening and closing tag. Examples include
<code><br></code>, <code><hr></code>,
<code><input></code>, and <code><img></code>. When using
those tags, you must add a slash to the end of the tag, namely
immediately before the "<code>></code>". In order to not confuse
older browsers, it's sensible to add a space before the trailing
slash. For a line break, you should therefore use
<code><br /></code>.</p>
<p>Example for HTML 4.01:</p>
<pre>
<img src="Bernie" width="250" height="100" alt="Photo of my dog">
</pre>
<p>Example for XHTML:</p>
<pre>
<img src="Bernie" width="250" height="100" alt="Photo of my dog" />
</pre>
<toc-add-entry name="closingtags">Optional closing tags must always
be used</toc-add-entry>
<p>Some HTML tags can have an optional closing tag. Some of those tags
are <code><p></code>, <code><td></code>,
<code><option></code>, and <code><li></code>.
To comply to XHTML, all of those tags must be closed.</p>
<p>Example for HTML 4.01:</p>
<pre>
<p>This is a paragraph.
<p>This is the next paragraph.
</pre>
<p>Example for XHTML:</p>
<pre>
<p>This is a paragraph.</p>
<p>This is the next paragraph.</p>
</pre>
<toc-add-entry name="closingtags">Every attribute has to have
a value</toc-add-entry>
<p>In HTML, it's possible to use an "empty" attribute. Examples
are <code><hr noshade></code>, <code><td nowrap></code>,
and <code><option selected></code>. In XHTML, the name
of the attribute is repeated as the value.</p>
<p>Example for HTML 4.01:</p>
<pre>
<select name="number">
<option>One</option>
<option selected>Two</option>
<option>Three</option>
</select>
</pre>
<p>Example for XHTML:</p>
<pre>
<select name="number">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
</pre>
<toc-add-entry name="quotedvalues">The values of an attribute have
to be quoted</toc-add-entry>
<p>While it's common in HTML to write something like
<code><td colspan=2></code>, this wouldn't qualify as valid
XHTML. Each and every value has to be in double quotes.</p>
<p>Example for HTML 4.01:</p>
<pre>
<td colspan=2>Text in the cell</td>
</pre>
<p>Example for XHTML:</p>
<pre>
<td colspan="2">Text in the cell</td>
</pre>
<toc-add-entry name="tablesummary">Tables must have a summary
of their content</toc-add-entry>
<p>People with disabilities might rely on a screen-reader to browse
a website. For them, it's valuable information to have an overview
of a table instead of having to read each single cell. For this
purpose, there was an attribute for tables newly introduced into
XHTML. It's called <code>summary</code>, and it should contain
exactly that.</p>
<p>Example for HTML 4.01:</p>
<pre>
<table width="100%">
<tr>
<td>Potato</td>
<td>2000-08-14</td>
</tr>
<tr>
<td>Woody</td>
<td>2002-07-19</td>
</tr>
</table>
</pre>
<p>Example for XHTML:</p>
<pre>
<table width="100%" summary="Dates of Debian stable releases">
<tr>
<td>Potato</td>
<td>2000-08-14</td>
</tr>
<tr>
<td>Woody</td>
<td>2002-07-19</td>
</tr>
</table>
</pre>
<toc-add-entry name="tablesummary">Separate your content
and formatting</toc-add-entry>
<p>We already use Cascading Style Sheets (CSS) for most of the layout
on the website. If you need to make changes to the formatting
of your document, please do so by using CSS instead of e.g. the
<code><font></code> tag. Moreover, both
<code><b></b></code> (for bold text) and
<code><i></i></code> (for italics) should be avoided.
You can use <code><strong></strong></code> (for
<strong>this effect</strong>) and
<code><em></em></code> (for <em>this effect</em>)
instead.</p>
<p>Example for HTML 4.01:</p>
<pre>
<p>
<font color="red">
<b>This is a fat red warning!</b>
</font>
</p>
</pre>
<p>Example for XHTML:</p>
<pre>
<p style="color: red;">
<strong>This is a fat red warning!</strong>
</p>
</pre>
Reply to: