www/server/standards gnu-website-guidelines.html

[Therese Godefroy]

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 21/04/26 14:58:34

Modified files:
        server/standards: gnu-website-guidelines.html 

Log message:
        Validation fixes.

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/standards/gnu-website-guidelines.html?cvsroot=www&r1=1.31&r2=1.32

Patches:
Index: gnu-website-guidelines.html
===================================================================
RCS file: /webcvs/www/www/server/standards/gnu-website-guidelines.html,v
retrieving revision 1.31
retrieving revision 1.32
diff -u -b -r1.31 -r1.32
--- gnu-website-guidelines.html 26 Apr 2021 14:31:05 -0000      1.31
+++ gnu-website-guidelines.html 26 Apr 2021 18:58:32 -0000      1.32
@@ -3,7 +3,8 @@
 <title>Website Guidelines - GNU Project - Free Software Foundation</title>
 <style type="text/css"><!--
   .skiptoc { position: absolute; top: -2.5em; left: 0; }
-  .toc {
+  #content .toc {
+    display: block;
     position: relative;
     text-align: center;
     padding: 1em 0 1.1em;
@@ -76,56 +77,55 @@
 <hr class="no-display" />
 <h3 class="no-display">Table of Contents</h3>
 <ul class="columns">
-  <li><p><a href="#GeneralGuidelines"><b>General Guidelines</b></a>
+  <li><a href="#GeneralGuidelines"><b>General Guidelines</b></a>
     <ul>
-      <li><p><a href="#gnu-policies">GNU policies</a></p></li>
-      <li><p><a href="#CopyrightGuidelines">Copyright guidelines</a></p></li>
-      <li><p><a href="#HTMLGuidelines">Web and Accessibility 
Standards</a></p></li>
-    </ul></p></li>
-  <li><p><a href="#new-page"><b>Creating a New Page</b></a>
+      <li><a href="#gnu-policies">GNU policies</a></li>
+      <li><a href="#CopyrightGuidelines">Copyright guidelines</a></li>
+      <li><a href="#HTMLGuidelines">Web and Accessibility Standards</a></li>
+    </ul></li>
+  <li><a href="#new-page"><b>Creating a New Page</b></a>
     <ul>
-      <li><p><a href="#filenames">Naming the file</a></p></li>
-      <li><p><a href="#html-required">Doctype and required HTML 
elements</a></p></li>
-      <li><p><a href="#page-footer">Page footer</a></p></li>
-      <li><p><a href="#templating">Using our page template</a></p></li>
-    </ul></p></li>
-  <li><p><a href="#writing"><b>Writing and Editing</b></a>
+      <li><a href="#filenames">Naming the file</a></li>
+      <li><a href="#html-required">Doctype and required HTML elements</a></li>
+      <li><a href="#templating">Using our page template</a></li>
+    </ul></li>
+  <li><a href="#writing"><b>Writing and Editing</b></a>
     <ul style="display: inline-block">
-      <li><p><a href="#page-contents">Page contents</a></p></li>
-      <li><p><a href="#orthography">Spelling and punctuation</a></p></li>
-      <li><p><a href="#urls">URLs - local links</a></p></li>
-      <li><p><a href="#anchors">URLs - page anchors</a></p></li>
-      <li><p><a href="#external-links">URLs - external links</a></p></li>
-      <li><p><a href="#mailto">URLs - email links</a></p></li>
-      <li><p><a href="#abbreviations">Acronyms and abbreviations</a></p></li>
-      <li><p><a href="#tables">Tables and menus</a></p></li>
-    </ul></p></li>
-  <li><p><a href="#styling"><b>Styling</b></a>
+      <li><a href="#page-contents">Page contents</a></li>
+      <li><a href="#orthography">Spelling and punctuation</a></li>
+      <li><a href="#urls">URLs - local links</a></li>
+      <li><a href="#anchors">URLs - page anchors</a></li>
+      <li><a href="#external-links">URLs - external links</a></li>
+      <li><a href="#mailto">URLs - email links</a></li>
+      <li><a href="#abbreviations">Acronyms and abbreviations</a></li>
+      <li><a href="#tables">Tables and menus</a></li>
+    </ul></li>
+  <li><a href="#styling"><b>Styling</b></a>
     <ul>
-      <li><p><a href="#styling-templated">Styling of templated 
pages</a></p></li>
-      <li><p><a href="#other-stylesheets">Other stylesheets</a></p></li>
-      <li><p><a href="#text-only">Text-only browsers</a></p></li>
-    </ul></p></li>
-  <li><p><a href="#UseofGraphics"><b>Use of Graphics</b></a>
+      <li><a href="#styling-templated">Styling of templated pages</a></li>
+      <li><a href="#other-stylesheets">Other stylesheets</a></li>
+      <li><a href="#text-only">Text-only browsers</a></li>
+    </ul></li>
+  <li><a href="#UseofGraphics"><b>Use of Graphics</b></a>
     <ul>
-      <li><p><a href="#caveats">Caveats</a></p></li>
-      <li><p><a href="#image-basics">Basic recommendations</a></p></li>
-      <li><p><a href="#image-css">CSS classes for images</a></p></li>
-    </ul></p></li>
-  <li><p><a href="#pollinking"><b>Linking Criteria</b></a></p></li>
-  <li><p><a href="#repo"><b>Technical Tips</b></a>
+      <li><a href="#caveats">Caveats</a></li>
+      <li><a href="#image-basics">Basic recommendations</a></li>
+      <li><a href="#image-css">CSS classes for images</a></li>
+    </ul></li>
+  <li><a href="#pollinking"><b>Linking Criteria</b></a></li>
+  <li><a href="#repo"><b>Technical Tips</b></a>
     <ul>
-      <li><p><a href="#cvs">Basic CVS commands</a></p></li>
-      <li><p><a href="#symlinks">Symbolic links</a></p></li>
-      <li><p><a href="#refresh">Meta refresh (don't use)</a></p></li>
-      <li><p><a href="#scripts">Server-side scripts</a></p></li>
-      <li><p><a href="#sysadmins">System administrators</a></p></li>
-    </ul></p></li>
-  <li><p><a href="#UsefulResources"><b>Useful Resources</b></a>
+      <li><a href="#cvs">Basic CVS commands</a></li>
+      <li><a href="#symlinks">Symbolic links</a></li>
+      <li><a href="#refresh">Meta refresh (don't use)</a></li>
+      <li><a href="#scripts">Server-side scripts</a></li>
+      <li><a href="#sysadmins">System administrators</a></li>
+    </ul></li>
+  <li><a href="#UsefulResources"><b>Useful Resources</b></a>
     <ul>
-      <li><p><a href="#external-resources">External resources</a></p></li>
-      <li><p><a href="#internal-resources">Internal resources</a></p></li>
-    </ul></p></li>
+      <li><a href="#external-resources">External resources</a></li>
+      <li><a href="#internal-resources">Internal resources</a></li>
+    </ul></li>
 </ul>
 <hr class="no-display" />
 </div>
@@ -254,7 +254,7 @@
 href="#symlinks"><code>.symlinks</code></a>
 file to handle this.</p></li>
 
-<li id="NamingTranslations">If you translate your web page (say,
+<li id="NamingTranslations"><p>If you translate your web page (say,
 <code><var>page</var>.html</code>) in different languages, please
 name the translations <code><var>page.lang</var>.html</code>&mdash;
 <code><var>lang</var></code> should contain the relevant two-letter code
@@ -288,10 +288,10 @@
 If you <i>must</i> add a comment before <code>&lt;!DOCTYPE html></code>, then
 use <code>&lt;!--[if !IE]> comments &lt;![endif]--></code>.</p></li>
 
-<li><p>The <code>&lt;head&gt;</code> element should contain this line:
+<li><p>The <code>&lt;head&gt;</code> element should contain this line:</p>
 <p class="emph-box">
 <code>&lt;link rel="author" href="mailto:webmasters@gnu.org"&gt;</code></p>
-Some browsers use this information to allow users to easily report
+<p>Some browsers use this information to allow users to easily report
 problems they find on a page.</p></li>
 
 <li><p>The first header element, generally <code>&lt;h1&gt;</code> or 
<code>&lt;h2&gt;</code>, should have
@@ -391,7 +391,7 @@
 
 <li><p>Since these conventions are not always very specific, especially as
 regards hyphenation and quotes, gnu.org adds its own rules for the sake of
-consistency:
+consistency:</p>
   <ul>
   <li><p>The term &ldquo;nonfree&rdquo; is preferred over 
&ldquo;non-free&rdquo;;
   likewise, &ldquo;noncommercial&rdquo; over 
&ldquo;non-commercial.&rdquo;</p></li>
@@ -403,7 +403,7 @@
   <li><p>Where they exist, the double spaces after sentence breaks should be
   preserved.  They enable Emacs sentence commands to do the right 
thing.</p></li>
   </ul>
-</p></li>
+</li>
 </ul>
 
 
@@ -457,7 +457,7 @@
 <li><p>Consider others linking to your page when either removing an element
 that carries an <code>id</code> attribute, or changing an <code>id</code>.
 Place the old one on a block element nearby. If there is no suitable
-element, add one. Here is an example from the Philosophy main page:
+element, add one. Here is an example from the Philosophy main page:</p>
 
 <pre class="emph-box">
 <samp>&lt;!-- please leave both these ID attributes here. ... --&gt;
@@ -470,7 +470,7 @@
 &lt;/div&gt;</samp>
 </pre>
 
-Please avoid moving the old <code>id</code> to a translatable string,
+<p>Please avoid moving the old <code>id</code> to a translatable string,
 unless there is no other way to keep the markup valid. Translators will
 thank you!</p></li>
 </ul>
@@ -504,10 +504,10 @@
 
 <li><p>When citing people, place the <code>mailto:</code> anchor next to
 their name, so that the email address is retained in printed copies of
-the page; for example,
+the page; for example,</p>
 
   <ul>
-     <li><p>If the person owns a website:
+     <li><p>If the person owns a website:</p>
         <pre class="emph-box">
 <samp>&lt;a href="https://www.stallman.org/"&gt;Richard 
Stallman&lt;/a&gt;</samp>
 <samp>&lt;a 
href="mailto:rms@gnu.org"&gt;&amp;lt;rms@gnu.org&amp;gt;&lt;/a&gt;</samp></pre>
@@ -516,8 +516,8 @@
                 <a href="https://www.stallman.org/";>Richard Stallman</a>
                 <a href="mailto:rms@gnu.org";>&lt;rms@gnu.org&gt;</a>
         </p>
-     </p></li>
-     <li><p>
+     </li>
+     <li>
         <p>If the person doesn't own a website:</p>
         <pre class="emph-box">
 <samp>Richard Stallman</samp>
@@ -527,9 +527,9 @@
                 Richard Stallman
                 <a href="mailto:rms@gnu.org";>&lt;rms@gnu.org&gt;</a>
         </p>
-     </p></li>
+     </li>
   </ul>
-</p></li>
+  </li>
 </ul>
 
 
@@ -636,16 +636,16 @@
 <code>mini.css</code>, as these pages are
 usually very basic, plain pages with little or no formatting.</p></li>
 
-<li><p>There are dedicated stylesheets for software manuals.  The main ones 
are:
+<li><p>There are dedicated stylesheets for software manuals.  The main ones 
are:</p>
   <ul>
-  <li><p><a href="/style.css"><code>style.css</code></a>;</p></li>
-  <li><p><a href="/software/gnulib/manual.css"><code>gnulib.css</code></a>,
+  <li><a href="/style.css"><code>style.css</code></a>;</li>
+  <li><a href="/software/gnulib/manual.css"><code>gnulib.css</code></a>,
   which imports <code>style.css</code> and adds a few more definitions;
   it is used by <code>gendocs.sh</code> to <a
   href="/prep/maintain/html_node/Invoking-gendocs_002esh.html">
-  regenerate Texinfo manuals</a>.</p></li>
+  regenerate Texinfo manuals</a>.</li>
   </ul>
-</p></li>
+</li>
 
 <li><p>Translators maintain stylesheets 
(<code>/style.<var>lang</var>.css</code>)
 that modify <code>layout.css</code> according to
@@ -685,7 +685,7 @@
 
 <li><p>The CSS media queries can be used to detect graphical web browsers and 
their
 capabilities, but may be ignored (always return <var>true</var>) on text-only
-browsers.
+browsers.</p>
 
 <p>The correct way to prevent graphical browsers from parsing
 a CSS fragment dedicated to text-only browsers is:</p>
@@ -732,7 +732,7 @@
 </code></pre>
 
 <p>Always double-check the result on different web browsers.</p>
-</p></li>
+</li>
 </ul>
 
 <p>To maximize compatibility, assume the terminal buffer has 80 to 132 columns
@@ -792,7 +792,7 @@
 contrast</a> between informative parts (text, graphs, etc.) and
 background.</p></li>
 
-<li><p><p>Always have a textual alternative for in-line images, to ensure
+<li><p>Always have a textual alternative for in-line images, to ensure
 indexability by search engines and accessibility.  For instance:</p>
 
 <div class="pict left">
@@ -827,9 +827,9 @@
 their way to the translatable strings that are extracted by the
 PO4A/Gettext tools.</p>
 <div style="clear: both"></div>
-</p></li>
+</li>
 
-<li id="image-size">Check that the image doesn't look too big or too small
+<li id="image-size"><p>Check that the image doesn't look too big or too small
 when displayed at its original size, using the browser's default font
 size. If it is too big and you can't make a smaller version, adjust the
 size with the width and height attributes.<br />
@@ -838,7 +838,7 @@
 smoother, especially on low-end machines with poor connectivity.</p></li>
 
 <li><p>Also adjust image width or height in a style attribute, using scalable
-units such as <code>em</code> or <code>%</code>; for instance:
+units such as <code>em</code> or <code>%</code>; for instance:</p>
 <div style="clear: both"></div>
 
 <img src="/graphics/gnu-post/Alternative-GNU-stamp.png"
@@ -862,7 +862,7 @@
 <code>height</code> will reserve the space required for the image during
 the page loading phase, preventing incremental <a
 href="https://developers.google.com/speed/docs/insights/browser-reflow";>
-layout reflows</a>.</p></p></li>
+layout reflows</a>.</p></li>
 
 <li><p>Link all images that are displayed throughout the website to the
 relevant page, usually in <code>/graphics/</code>.
@@ -874,7 +874,7 @@
 <h4 id="image-css">CSS classes for images</h4>
 
 <ul class="para">
-<li><p><p>If you are adding a small floating image to a page that uses
+<li><p>If you are adding a small floating image to a page that uses
 <a href="/layout.css"><code>layout.css</code></a> (the stylesheet for <a
 href="#templating">templated pages</a>), you may want to use the
 <code>imgright</code> or <code>imgleft</code> class
@@ -903,9 +903,9 @@
 &lt;/p&gt;
 </pre>
 <div style="clear: both"></div>
-</p></li>
+</li>
 
-<li><p><p>If the image you are adding is 12em wide or more, and the page is
+<li><p>If the image you are adding is 12em wide or more, and the page is
 templated, you may find it convenient to use one of the responsive
 <code>pict</code> classes that are defined in the IMAGES section of
 <code>layout.css</code>. You can adjust the width in a style attribute if none
@@ -933,7 +933,7 @@
 inherit <code>max-width</code> on all web browsers (i.e., always test for
 compatibility when you need to put a table beside a picture).</p>
 <div style="clear: both"></div>
-</p></li>
+</li>
 
 <li><p><a href="/graphics/graphics.css"><code>graphics.css</code></a> has
 some other layouts.</p></li>
@@ -1117,7 +1117,7 @@
 <a href="/software/trans-coord/manual/cvs/cvs.html#Connecting-with-rsh-or-ssh">
 <code>:extssh:</code></a> to use an external ssh program.</p></li>
 
-<li><p>
+<li>
 <p>If you have write access to the main repository of www.gnu.org, check
 it out with your Savannah login username:</p>
 
@@ -1127,18 +1127,18 @@
 
 <p>You will get a working directory, <code>www</code>, with the same
 structure as our main website.</p>
-</p></li>
+</li>
 
-<li><p>
+<li>
 <p>If you don't have write access to the main repository, you can still
 check it out anonymously:</p>
 
 <pre class="emph-box">
 <kbd>cvs -z3 -d:pserver:anonymous@cvs.savannah.gnu.org:/web/www co www</kbd>
 </pre>
-</p></li>
+</li>
 
-<li><p>
+<li>
 <p>Check out the <strong>web</strong> repository of the 
<var>fooproject</var>:</p>
 
 <pre class="emph-box">
@@ -1156,33 +1156,33 @@
 href="/server/standards/README.webmastering.html#gnupackages">Web pages for
 official GNU software</a> before committing anything to the web repository
 of a software project.</em></p>
-</p></li>
+</li>
 
-<li><p>
+<li>
 <p>Add a file or directory:</p>
 
 <pre class="emph-box">
 <kbd>cvs add <var>foo</var></kbd>
 </pre>
-</p></li>
+</li>
 
-<li><p>
+<li>
 <p>Update before you edit a file:</p>
 
 <pre class="emph-box">
 <kbd>cvs update -P <var>foo</var></kbd>
 </pre>
-</p></li>
+</li>
 
-<li><p>
+<li>
 <p>Check the changes you are going to commit:</p>
 
 <pre class="emph-box">
 <kbd>cvs diff -U2 <var>foo</var></kbd>
 </pre>
-</p></li>
+</li>
 
-<li><p>
+<li>
 <p>Perform the commit (no need for <kbd>cvs add</kbd> if the file is
 already in the repository):</p>
 
@@ -1204,7 +1204,7 @@
 
 <p>The changes (except to <a href="#symlinks">.symlinks files</a>) should
 be visible on www.gnu.org within minutes.</p>
-</p></li>
+</li>
 </ul>
 
 <p>For further details on CVS, such as reverting to a previous version, or
@@ -1236,10 +1236,10 @@
 as described below:</p>
 
 <ul>
-<li><p>Lines starting with a sharp sign (&ldquo;#&rdquo;) are ignored.</p></li>
+<li>Lines starting with a sharp sign (&ldquo;#&rdquo;) are ignored.</li>
 
-<li><p>Lines that do not contain two strings separated by white space are 
silently
-ignored.</p></li>
+<li>Lines that do not contain two strings separated by white space are silently
+ignored.</li>
 </ul>
 
 <p>Here is an example of <code>.symlinks</code>, which redirects a file to
@@ -1297,14 +1297,14 @@
 to harm both accessibility and public search engine ranking.</p>
 
 <ul class="para">
-<li><p>Some old pages are still redirected via a meta refresh such as this:
+<li><p>Some old pages are still redirected via a meta refresh such as this:</p>
 
 <p class="emph-box"><code>
 &lt;meta http-equiv="refresh" content="0"
   url="https://www.gnu.org/<var>target</var>"&gt;
 </code></p>
 
-Please don't use this method for new redirections, as some browsers (e.g.,
+<p>Please don't use this method for new redirections, as some browsers (e.g.,
 Firefox) prevent the redirection from happening without user input. This
 is a security feature, but many people find it annoying, and it can
 disorient some impaired users.</p></li>
@@ -1467,7 +1467,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2021/04/26 14:31:05 $
+$Date: 2021/04/26 18:58:32 $
 <!-- timestamp end --></p>
 </div>
 </div><!-- for class="inner", starts in the banner include -->