www/server/staging/standards gnu-website-guidel...

[Lorenzo L. Ancora]

CVSROOT:        /web/www
Module name:    www
Changes by:     Lorenzo L. Ancora <lorenzoancora>       21/02/21 15:19:15

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

Log message:
        Docs: SSIs;WCAG H51,F49,F91;YUI 2;CLI browsers;HTML 5. Upg. Q, ABBR, 
H*, layout

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

Patches:
Index: gnu-website-guidelines.html
===================================================================
RCS file: /web/www/www/server/staging/standards/gnu-website-guidelines.html,v
retrieving revision 1.15
retrieving revision 1.16
diff -u -b -r1.15 -r1.16
--- gnu-website-guidelines.html 18 Feb 2021 16:32:29 -0000      1.15
+++ gnu-website-guidelines.html 21 Feb 2021 20:19:14 -0000      1.16
@@ -22,8 +22,8 @@
   <li><a href="#filenames">4. Filenames</a></li>
   <li><a href="#urls">5. URLs</a></li>
   <li><a href="#HTMLGuidelines">6. HTML Guidelines</a></li>
-  <li><a href="#tables">7. Tables and menus</a></li>
-  <li><a href="#templating">8. Using our page template</a></li>
+  <li><a href="#tables">7. Tables and Menus</a></li>
+  <li><a href="#templating">8. Using our Page Template</a></li>
   <li><a href="#styling">9. Page Styling</a></li>
   <li><a href="#UseofGraphics">10. Use of Graphics</a></li>
   <li><a href="#pollinking">Appendix 1 - Linking Policies</a></li>
@@ -42,8 +42,8 @@
 </div>
 
 <p>Please be considerate of all who access our web pages, and accommodate
-them, including those who use text-only browsers or devices with limited 
computing power, as well
-as those with slow Internet connections. We wish to prevent web designs that 
look
+them, including those who use low-end hardware, as well as those with slow
+Internet connections. We wish to prevent web designs that look
 great under one version of one browser, and ugly under many others.  Of
 course, please don't install any of the proprietary web browsers
 available if you don't already use them anyway.</p>
@@ -67,10 +67,6 @@
 the <a href="/licenses/gpl-3.0.html">GNU General Public License</a> or the
 <a href="/licenses/lgpl-3.0.html">GNU Lesser General Public License</a>.</li>
 
-<li>The use of heavy graphics should be minimized so pages load fast over
-slow Internet connections. If an image slows down a page, consider using
-lossless compression.</li>
-
 <li>Offer a document in as many formats as the GNU Project has it.
 For an example, see <a href="/licenses/fdl.html">The GNU Free
 Documentation License</a>.  This lets users get the document in the
@@ -114,7 +110,8 @@
 
 <ul class="para">
 <li>Every page should have a copyright notice.  See the <a
-href="//web.cvs.savannah.gnu.org/viewvc/*checkout*/www/server/standards/boilerplate.html?root=www&amp;content-type=text%2Fplain">
+href="//web.cvs.savannah.gnu.org/viewvc/*checkout*/www/server/standards/
+boilerplate.html?root=www&amp;content-type=text%2Fplain">
 boilerplate</a>, referred below.</li>
 
 <li>Every page should have a notice giving everyone permission
@@ -202,7 +199,7 @@
 rel="noopener">ISO 639-1</a>,
 and optionally a hyphen followed by the two-letter <i>Alpha-2</i> country
 code from <a href="https://www.iso.org/obp/ui/#search/code/";
-rel="noopener">ISO 3166-1</a> (in lowercase).
+rel="noopener">ISO 3166-1</a> (converted in lowercase).
 For example, the German translation of <code>not-ipr.html</code>
 should be named <code>not-ipr.de.html</code>; the Brazilian Portuguese
 translation should be named <code>not-ipr.pt-br.html</code>.</li>
@@ -268,8 +265,10 @@
 </code></p>
 <p>which browsers display this way:</p>
 <p class="emph-box" style="background-color: inherit">
-<a href="https://www.stallman.org/";>Richard Stallman</a>
-<a href="mailto:rms@gnu.org";>&lt;rms@gnu.org&gt;</a>
+    <samp>
+        <a href="https://www.stallman.org/";>Richard Stallman</a>
+        <a href="mailto:rms@gnu.org";>&lt;rms@gnu.org&gt;</a>
+    </samp>
 </p>
 <p>It is less confusing to the user, because it's clear what is a link
 to another web page and what is a
@@ -277,7 +276,11 @@
 and send, if this is supported by the client.  Also, if users save a copy
 of the page, they will have a copy of the e-mail address they can use without
 going back to their web browser.  If the person doesn't have a web
-page, leave the name unanchored.</p></li>
+page, leave the name unanchored.  See
+<a href="https://tools.ietf.org/html/rfc6068#section-6";>RFC 6068</a> for
+advanced examples of mailto URIs (ie. to specify a subject, the body, 
&hellip;).
+
+</p></li>
 
 <li>When embedding static resources like videos that are not in
 the <code>www</code> CVS repository along with the rest of the
@@ -298,61 +301,70 @@
 <ul class="para">
 <li>HTML 5 and CSS3 are preferred over older (X)HTML and CSS standards.</li>
 
+<li>Regardless of the web standards used, all pages should meet the latest
+<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> published by the
+<abbr title="Web Accessibility Initiative">WAI</abbr>.</li>
+
 <li>All public pages of the GNU website should be strictly compliant with the
 <a href="https://www.w3.org/standards/";>W3C standards</a> and the subsets
 of HTML and CSS used must be composed only by official
-W3C Recommendations (RECs) supported by the most used web browsers.</li>
+<abbr title="W3C Recommendations">RECs</abbr> supported by the most used web
+browsers.</li>
 
-<li>Please follow the above mentioned web standards strictly.  Don't
-neglect <a
-href="https://www.w3.org/TR/html401/struct/global.html#h-7.1";>required
+<li>Please follow the above mentioned web standards strictly, even when you are
+forced to follow superseded W3C recommendations: don't neglect
+<a href="https://www.w3.org/TR/html401/struct/global.html#h-7.1";>required
 elements</a> such as <code>&lt;html&gt;</code>, <code>&lt;head&gt;</code>,
-<code>&lt;title&gt;</code>, <code>&lt;body&gt;</code>, etc. when using (X)HTML,
-and always include the appropriate DTD or Schema reference.
+<code>&lt;title&gt;</code>, <code>&lt;body&gt;</code>, etc. when using HTML 4,
+and always include the appropriate DTD or Schema reference in all markup
+standards older than HTML 5.
 This appeases overly pedantic web browsers.</li>
 
-<li>Do not add comments at the top of a document.  Web browsers
-expect the doctype, XML declaration, or Schema to be at the top.
-Comments will confuse them, and often cause them to
-incorrectly interpret your markup.</li>
+<li>Do not add <code>&lt;!-- comments --&gt;</code> at the top of a
+document.  Old web browsers expect the doctype, XML declaration, or Schema to 
be
+at the top.  Comments will confuse them, and often cause them to
+incorrectly interpret your markup.<br />
+If you <i>must</i> add a comment before <code>&lt;!DOCTYPE html></code>, then
+use <code>&lt;!--[if !IE]> comments &lt;![endif]--></code>.</li>
 
-<li>The &lt;head&gt; element should contain this line:
+<li>The <code>&lt;head&gt;</code> element should contain this line:
 <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
 problems they find on a page.</li>
 
-<li>The first header tag, &lt;h[n]&gt;, should have its text
-duplicated at the start of the &lt;title&gt; tag.  The &lt;title&gt; tag
+<li>The first header tag, <code>&lt;h<var>N</var>&gt;</code>, should have
+its text duplicated at the start of the <code>&lt;title&gt;</code> tag.
+The <code>&lt;title&gt;</code> tag
 is used by many browsers in menus like the history and bookmarks lists,
-as a link to that page.  Repeating the main heading in the &lt;title&gt;
-ensures that, when
+as a link to that page.  Repeating the main heading in the
+<code>&lt;title&gt;</code> ensures that, when
 users click on an item in these menus, they get a page with the expected
 heading.  Please properly use your headers in numerical order: 1, 2,
 etc.  These are not used for looks, but for the organization of the
 document.</li>
 
-<li>The &lt;title&gt; tag should include the phrases &ldquo;GNU Project&rdquo;
-and &ldquo;Free Software Foundation&rdquo; so the pages will be found
-when web search engines are used.  The default is to add this at the
+<li>The <code>&lt;title&gt;</code> tag should include the
+phrases <i>&ldquo;GNU Project&rdquo;</i>
+and <i>&ldquo;Free Software Foundation&rdquo;</i> so the pages can be better
+indexed by external search engines.  The default is to add this at the
 end: <code> - GNU Project - Free Software Foundation</code>.</li>
 
 <li>Acronyms/abbreviations:
   <ul>
-  <li>Never use <code>&lt;acronym&gt;</code>: HTML&nbsp;5 obsoletes it in
-  favor of <code>&lt;abbr&gt;</code>.</li>
-
-  <li>Don't use <code>&lt;abbr&gt;</code> unless for a really
-  compelling reason.  Browsers render it in an ugly way.</li>
-
   <li>When an abbreviation may be unfamiliar to a reader, give its
-  expansion the first time it is used in a document, like this:
-  <code>&lt;abbr title="Expanded
+      expansion <i>only the first time</i> it is used in a document.<br />
+      Example: <code>&lt;abbr title="Expanded
   Abbreviation"&gt;EA&lt;/abbr&gt;</code> or <code>EA
   (Expanded Abbreviation)</code>.</li>
 
-  <li>Further occurrences, in any case, should be written without any
-  markup: just <code>EA</code>.</li>
+      <li>Never use <code>&lt;acronym&gt;</code>: HTML&nbsp;5 obsoletes it in
+      favor of <code>&lt;abbr&gt;</code>. The latter must be expanded in a
+      <code>title</code> attribute.</li>
+
+      <li>Make sure <code>&lt;abbr&gt;</code> is styled via CSS to meet the
+      accessibility guidelines.  By default some browsers render it in an
+      ugly way.</li>
 
   <li>For common-enough initialisms, such as GNU, FSF, BSD, RAM, HTML,
   DVD, and so on and so on, no markup is needed at all.
@@ -366,15 +378,15 @@
 
 
 <ul class="para">
-<li>Please use tables to organize data, not the presentation of the
-web page.</li>
-
-<li>Screen reader software used by most blind people reads the text
-from left to right, ignoring any tables that you make.  If you use
-tables, you should make sure that reading a whole
-page left to right doesn't confuse such software.  Please follow the
-<a href="https://www.w3.org/WAI/";>W3C web accessibility guidelines</a>
-to ensure that tables are properly marked for accessibility.</li>
+<li>Please use tables to organize data
+(<i>data</i> tables, see
+<a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H51";>WCAG 2.1 H51</a>),
+not the presentation of the web page (<i>layout</i> tables).<br />
+If you must use layout tables, be sure both
+<a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F49";>WCAG 2.1 
F49</a>
+and
+<a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F91";>WCAG 2.1 
F91</a>
+do not occur in any circumstance.</li>
 
 <li>Some people like to organize links as a menu to
 the left or right of the main text when using graphical browsers.  That
@@ -391,7 +403,7 @@
 </ul>
 
 
-<h3 id="templating" class="subheader">8. Using our page template</h3>
+<h3 id="templating" class="subheader">8. Using our Page Template</h3>
 
 
 <ul class="para">
@@ -400,19 +412,22 @@
 website, and the software projects.  Its use is mandatory for new pages in
 www.gnu.org, and highly recommended for software pages.  Please don't start
 out with an existing page to create a new one; use the <a
-href="//web.cvs.savannah.gnu.org/viewvc/*checkout*/www/server/standards/boilerplate.html?root=www&amp;content-type=text%2Fplain">
+href="//web.cvs.savannah.gnu.org/viewvc/*checkout*/www/server/standards/
+boilerplate.html?root=www&amp;content-type=text%2Fplain">
 original source</a> of the boilerplate instead, and follow the instructions
 in it.</li>
 
 <li>The XHTML templated pages must follow the <a
 href="https://www.w3.org/TR/xhtml1/";>XHTML-1.0 guidelines</a>.</li>
 
-<li>Our server-side includes declare UTF-8 as the character encoding, so
-using any other encoding is problematic.</li>
+<li>Our <abbr title="Server-Side Includes">SSIs</abbr> declare UTF-8 as the
+character encoding, so using any other encoding is problematic.<br />See the
+<a href="https://httpd.apache.org/docs/current/howto/ssi.html";>
+    Introduction to Apache SSIs</a> to learn more on this topic.</li>
 </ul>
 
 
-<h3 id="styling" class="subheader">9. Styling</h3>
+<h3 id="styling" class="subheader">9. Page Styling</h3>
 
 
 <h4>Styling of templated pages</h4>
@@ -422,8 +437,11 @@
 <code>/layout.css</code>; it covers most of our use cases.</li>
 
 <li>Mobile devices with very limited resources use <code>/mini.css</code>.
-This stylesheet is just the Yahoo User Interface (version&nbsp;2) reset and
-base stylesheets, as these devices typically have minimal need for various
+This stylesheet is just the Yahoo User Interface (version&nbsp;2) <a
+href="https://yui.github.io/yui2/docs/yui_2.9.0_full/reset/index.html";>reset</a>
+and <a
+href="https://yui.github.io/yui2/docs/yui_2.9.0_full/base/index.html";>base</a>
+stylesheets, as these devices typically have minimal need for various
 fonts and no need for fancy layouts.</li>
 
 <li>Printers use <code>/print.css</code>.  Note that the header, navigation
@@ -468,21 +486,100 @@
   </ul>
 </li>
 
-<li>Translators maintain stylesheets (<code>/style.<var>lang</var>.css</code>) 
that
-modify layout.css according to their own needs.  The RTL languages (Arabic,
-Persian, and Hebrew) use <code>/style.rtl.css</code>.</li>
+<li>Translators maintain stylesheets (<code>/style.<var>lang</var>.css</code>)
+that modify <a href="/layout.css"><code>layout.css</code></a> according to
+their own needs.  The RTL languages (Arabic, Persian, and Hebrew) use
+<a href="/style.rtl.css"><code>style.rtl.css</code></a>.</li>
 </ul>
 
+<h5>Text-only web browsers</h5>
 
-<h3 id="UseofGraphics" class="subheader">10. Use of Graphics</h3>
+<p>Even if the main web development target is composed by modern graphical web
+browsers, browsability through terminal web browsers is an indication of good
+accessibility: they behave similarly to some accessibility tools and may not
+ignore CSS, trying to approximate the graphic render as much as possible.</p>
 
+<ul class="para">
+<li>The webpages which are meaningful without media files (videos, graphics,
+photos, animations, &hellip;) may be tested on modern, stable text-only 
browsers
+and should be accessible by text-only users.</li>
+
+<li>The subset of text-only browsers for compatibility testing is composed by
+stable and modern text mode browsers (ie. lynx, elinks, w3m, &hellip;) executed
+on the latest stable xterm, with <i>at least</i> support for 24-bit color,
+italic/bold fonts and UTF-8 enabled.</li>
+
+<li>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
+web browsers.<br />
+The correct way to prevent graphical web browsers from parsing
+a CSS fragment dedicated to text-only web browsers is:
+<code>
+<div class="emph-box" style="display: flex; flex-direction: row; margin: 0px">
+    <pre style="width: 50%; padding: 0.5em">
+/* Discarded by GUI-based web browsers */
+@media only screen and (grid: 1) {
+    exp { prop: value; }
+    &hellip;
+}</pre>
+    <pre style="width: 49%; padding: 0.5em">
+/* Not downloded by GUI-based web browsers */
+@import url('tty.css') screen and (grid: 1);
+/* or, alternatively: */
+/* Not downloded by GUI-based web browsers */
+@import "tty.css" screen and (grid: 1);
+</pre>
+</div>
+</code>
+</code>
+&hellip;for in-page block embedding:
+<div class="emph-box" style="display: flex; flex-direction: row; margin: 0px">
+    <pre style="width: 50%; padding: 0.5em">
+&lt;-- Discarded by GUI-based web browsers -->
+&lt;style media="only screen and (grid: 1)">
+    exp { prop: value; }
+    &hellip;
+&lt;/style></pre>
+    <pre style="width: 49%; padding: 0.5em">
+&lt;style &hellip;&nbsp;>
+    /* Discarded by GUI-based web browsers */
+    @media only screen and (grid: 1) {
+        exp { prop: value; }
+        &hellip;
+    }
+&lt;/style></pre>
+</div>
+&hellip;and for external resource (direct) inclusion:
+<code>
+<pre class="emph-box">
+&lt;!-- Not downloded by GUI-based web browsers -->
+&lt;link href="tty.css" rel="stylesheet" media="only screen and (grid: 1)">
+</pre>
+</code>
+Always double-check the result on different web browsers.
+</li>
+</ul>
+<p>To maximize compatibility, assume the terminal buffer has 80 to 132 columns
+with no word-wrap and unlimited rows.  In each screen the user can "scroll" in
+various ways and the terminal can always display at least 23 lines; moreover,
+the user can instantly jump from one link to another and from one end of the
+page to another.  In some particular cases forced word-wrap is advantageous and
+you can use use <code>fold</code> from the GNU coreutils to ease the task.</p>
+
+<h3 id="UseofGraphics" class="subheader">10. Use of Graphics</h3>
 
 <ul class="para">
 <li>The use of graphics should be minimized, so pages load fast
-over slow links, especially animations.</li>
+over slow links, especially animations.<br />
+Ideally, the page loading time should remain under 3000 ms
+(with caching and proxying disabled), so when it exceeds this limit consider
+using lossless compression or smaller images.</li>
 
 <li>We do not use background images on our pages, as they make text
-significantly harder to read.</li>
+significantly harder to read.<br />
+Non-decorative elements must be implemented so as
+<a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F83";>WCAG 2.1 
F83</a>
+does not occur in common use cases.</li>
 
 <li>In the past, GIFs have had patent problems.  However, now that
 the IBM and Unisys patents (and other patents worldwide that are
@@ -499,19 +596,41 @@
 alpha channels; the former is not widely supported, and the latter are
 not fully supported by some older browsers).</li>
 
-<li>Before you take an image from another website, please ask for
-permission to use it.</li>
-
 <li>Always have a textual alternative for in-line images, to ensure
 indexability by search engines and accessibility.  For instance:
-<p class="emph-box"><code>&lt;img src="/graphics/*.jpg"
-title="[BRIEF TEXT]" alt="&amp;nbsp;[DESCRIPTIVE 
TEXT]&amp;nbsp;"&gt;</code></p>
+<div style="clear: both"></div>
+
+<div style="float: left; text-align: center; border: 1px dotted;
+            padding: 0.5em; margin: 0em 1em">
+    <p>Loaded in graphic browser:<br>
+    <img src="/graphics/gnu-post/Alternative-GNU-stamp.png"
+          title="BRIEF TEXT"
+          alt="&nbsp;[DESCRIPTIVE TEXT]&nbsp;"
+          style="width: 5em; height: auto; border: 2px solid gray">
+    </p>
+    <p>Loading failed or text reader:<br>
+    <samp>
+        <img src="/graphics/gnu-post/Alternative-GNU-stamp.invalid"
+              title="BRIEF TEXT"
+              alt="&nbsp;[DESCRIPTIVE TEXT]&nbsp;"
+              style="width: 5em; height: auto; border: 2px solid gray">
+        </p>
+    </samp>
+</div>
+
+<pre class="emph-box">
+&lt;img src="/graphics/gnu-post/Alternative-GNU-stamp.png"
+      title="BRIEF TEXT"
+      alt="&amp;nbsp;[DESCRIPTIVE TEXT]&amp;nbsp;"&gt;
+</pre>
+
 We add the non-breaking spaces (&amp;nbsp;) and square brackets to
 separate the DESCRIPTIVE TEXT from adjacent text, and help the user
 realize that this is a stand-in for an image.  The point of using
 non-breaking spaces rather than normal ones is to make sure they find
 their way to the translatable strings that are extracted by the
 PO4A/Gettext tools.</li>
+<div style="clear: both"></div>
 
 <li id="image-size">Make sure the image doesn't look too big or too small
 when displayed at its original size, using the browser's default font
@@ -519,54 +638,83 @@
 
 <li>Adjust image width or height in a style attribute, using scalable
 units such as <code>em</code> or <code>%</code>; for instance:
+<div style="clear: both"></div>
+
+<img src="/graphics/gnu-post/Alternative-GNU-stamp.png"
+      title="GNU stamp"
+      alt="&nbsp;[Stamp with an abstract GNU head]&nbsp;"
+      style="width: 10em; height: auto; float: right; margin: 0em 1em"
+      width="77px"
+      height="77px" />
+
+<pre class="emph-box">
+&lt;img src="/graphics/gnu-post/Alternative-GNU-stamp.png"
+      title="GNU stamp"
+      alt="&amp;nbsp;[Stamp with an abstract GNU head]&amp;nbsp;"
+      style="width: 10em; height: auto;"
+      width="77px"
+      height="77px" /&gt;
+</pre>
 
-<p class="emph-box"><code>&lt;img src="/graphics/*.jpg"
-alt="&amp;nbsp;[DESCRIPTIVE TEXT]&amp;nbsp;"
-style="width: 10em; height: auto;" width="77px" height="77px" /&gt;</code></p>
 This way, the page will look the same if the reader increases or
 decreases font size.<br />Specifying both <code>width</code> and
 <code>height</code> will reserve the space required for the image during
-the page loading phase.</li>
+the page loading phase, preventing incremental layout reflows.</li>
 
 <li>If you are adding a small floating image to a page that uses
-<code>layout.css</code> (the stylesheet for <a
-href="/server/standards/README.webmastering.html#templating">templated 
pages</a>),
-you may want to use the <code>imgright</code> or <code>imgleft</code> class
+<a href="/layout.css"><code>layout.css</code></a> (the stylesheet for <a
+href="/server/standards/README.webmastering.html#templating">templated 
pages</a>
+), you may want to use the <code>imgright</code> or <code>imgleft</code> class
 (defined in the IMAGES section of the stylesheet).  This will ensure that
 the floating direction is reversed if the page is translated into an RTL
 language.</li>
 
 <li>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 of the predefined ones fits your needs); for instance:
-
-<p class="emph-box"><code>&lt;div class="pict wide"
-style="width: 25em"&gt;&lt;img src="/graphics/*.jpg"
-alt="&amp;nbsp;[DESCRIPTIVE TEXT]&amp;nbsp;"
-/&gt;&lt;/div&gt;</code></p>
+<code>pict</code> classes that are defined in the <code>IMAGES</code> section 
of
+the <a href="/layout.css"><code>layout.css</code></a> stylesheet. You can 
adjust
+the width in a style attribute if none of the predefined ones fits your needs,
+for instance:
+<div style="clear: both"></div>
+
+<div class="pict wide" style="width: 12em">
+    <img src="/graphics/gnu-post/GNU-stamp.png"
+          title="Head of a GNU"
+          alt="&nbsp;[DESCRIPTIVE TEXT]&nbsp;"/>
+</div>
+
+<pre class="emph-box">
+&lt;div class="pict wide" style="width: 12em"&gt;
+    &lt;img src="/graphics/gnu-post/GNU-stamp.png"
+          title="GNU stamp"
+          alt="&amp;nbsp;[Stamp with a GNU head]&amp;nbsp;" /&gt;
+&lt;/div&gt;
+</pre>
 
-Note that the <code>div</code> container is necessary because some browsers 
(e.g.,
-NetSurf) don't know how to apply <code>max-width</code> to images.</li>
+Please note that the <code>div</code> container is necessary for
+retrocompatibility with some browsers which cannot apply <code>max-width</code>
+to images; in addition, be aware that nested <code>table</code> may not
+inherit <code>max-width</code> on all web browsers (ie. always test for
+compatibility when you need to put a table beside a picture).</li>
+<div style="clear: both"></div>
 
 <li><p>Link all images that are displayed throughout the website to the
 relevant page, usually in <code>/graphics/</code>.  This can be done with
 code similar to this, which corresponds to the image on the left:</p>
 
 <p class="imgleft">
-<a href="/graphics/agnuhead.html"><img
-   src="/graphics/gnu-head-sm.jpg"
-   title="Head of a GNU"
-   alt="&nbsp;[Black and white sketch of the Head of a GNU]&nbsp;"
+<a href="/graphics/gnu-post/"><img
+   src="/graphics/gnu-post/GNU-stamp.png"
+   title="GNU stamp"
+   alt="&nbsp;[Stamp with a GNU head]&nbsp;"
    style="width: 8em; height: auto"
    width="129px" height="122px" />
 </a></p>
 
 <pre class="emph-box">
 &lt;p class="imgleft"&gt;
-  &lt;a href="/graphics/agnuhead.html"&gt;
-    &lt;img src="/graphics/gnu-head-sm.jpg"
+  &lt;a href="/graphics/gnu-post/"&gt;
+    &lt;img src="/graphics/graphics/gnu-post/GNU-stamp.png"
           title="Head of a GNU"
           alt="&nbsp;[Black and white sketch of the Head of a GNU]&nbsp;"
           style="width: 8em; height: auto"
@@ -663,11 +811,11 @@
 Proprietary software should only be mentioned when the GNU software
 provides support for it, or to compare it against the features of
 well-known proprietary software.  For example, the following
-text&mdash;and not much else&mdash;would be acceptable:</p>
+text&mdash;and not much else&mdash;would be acceptable:
 
-<blockquote><p>w3 is a web browser for GNU Emacs, similar to Internet Explorer.
+<blockquote>w3 is a web browser for GNU Emacs, similar to Internet Explorer.
 It can run on all platforms GNU Emacs runs on, including GNU/Linux,
-proprietary Unix systems, and Windows.</p></blockquote>
+proprietary Unix systems, and Windows.</blockquote>
 
 <p>Links which appear in other areas, such as the testimonials or
 philosophy pages, as well as links to user groups may discuss such
@@ -685,14 +833,14 @@
 project pages should have little mention of open source.  The GNOME
 page used to provide a good example of a tactful way to do it:</p>
 
-<blockquote><p>GNOME is part of the GNU Project, and is free software 
(sometimes
-referred to as open source software).</p></blockquote>
+<blockquote>GNOME is part of the GNU Project, and is free software (sometimes
+referred to as open source software).</blockquote>
 
 <p>Any exceptions to this rule should be apparent from the context.
 For instance, user groups pages may talk in greater detail about
-open source; we state on the user groups page, &ldquo;As with our links
+open source; we state on the user groups page, <q>As with our links
 page, the FSF is not responsible for the contents of other websites,
-or how up-to-date their information is.&rdquo;</p>
+or how up-to-date their information is.</q></p>
 </dd>
 
 <dt>How does the page treat the GNU Project?</dt>
@@ -700,7 +848,7 @@
 <dd>
 <p>Pages which we link to should treat the GNU Project well.  The
 primary thing to look out for in this regard is whether the page
-calls the system GNU/Linux or just &ldquo;Linux.&rdquo;  GNU software project
+calls the system GNU/Linux or just &ldquo;Linux&rdquo;.  GNU software project
 and user group pages should almost never, if ever, fail to do this.
 Again, exceptions for other pages should be apparent from context.</p>
 
@@ -721,11 +869,13 @@
 primarily about free software, the policies do not hold full force for
 them.</p>
 
-<p>As a final explanation (coming from RMS):
+<p>As a final explanation:<br>
+<blockquote>
 Even for making links from www.gnu.org, we do not <em>require</em> that
 people call the system GNU/Linux or use the term &ldquo;free software&rdquo;
-rather than &ldquo;open source.&rdquo;  We do, however, require that they not
-promote any nonfree software.</p>
+rather than &ldquo;open source&rdquo;.  We do, however, require that they not
+promote any nonfree software. &mdash; <i>RMS</i>
+</blockquote></p>
 
 <p>If all this seems complicated, that's because, unfortunately, it is.  Don't
 worry; a knack for it comes with time and experience.  You may mis-evaluate
@@ -950,11 +1100,13 @@
 
 
 <ul class="para">
-<li>Outside gnu.org:
-  <ul>
+<h4>External resources</h4>
+<p>This section contains references managed by 3rd-parties.</p>
+<ul>
     <li>We follow the guidelines of the <a
     href="https://www.anybrowser.org/campaign/"; rel="noopener"
     style="text-decoration: none;">
+    <!-- You may use this icon on the pages which are intentionally simple -->
       <img src="../graphics/icons/anybrowser.png" width="96px" height="18px"
       title="Visit the 'Best Viewed on Any Browser' campaign website"
       alt="Best Viewed on Any Browser"
@@ -966,17 +1118,21 @@
     compatibility among web browsers.</li>
 
     <li>Use of <a href="https://www.w3.org/TR/2020/NOTE-css-2020-20201222/";
-    rel="noopener">CSS3 RECs</a> in place of WDs and CRs allows for stable
-    cross-browser styling.</li><!-- What do these abbreviations stand for ?? 
-->
+    rel="noopener">CSS3</a> <abbr title="W3C Recomendations">RECs</abbr> in
+    place of <abbr title="Working Drafts">WDs</abbr>,
+    <abbr title="Proposed Recommendations">PRs</abbr> and
+    <abbr title="Candidate Recommendations">CRs</abbr> allows for stable
+    cross-browser styling.</li>
 
     <li>Use of <a href="https://www.w3.org/TR/2018/REC-WCAG21-20180605/";
-    rel="noopener">WCAG&nbsp;2.1</a> ensures accessibility for a wide range of
-    people with disabilities.</li><!-- expand WCAG? -->
-  </ul>
-</li>
+    rel="noopener">
+    WCAG&nbsp;2.1</a>
+    ensures accessibility for a wide range of people with disabilities.</li>
+</ul>
 
-<li>On gnu.org:
-  <ul>
+<h4>Internal resources</h4>
+<p>This section contains references managed by us.</p>
+<ul>
     <li><a href="#content">The GNU Website Guidelines</a> (this page);</li>
 
     <li>Guidelines for
@@ -1011,8 +1167,6 @@
 
     <li><a href="/server/tasks.html">How to help</a> with our
     <a href="/server/server.html">web server</a>.</li>
-  </ul>
-</li>
 </ul>
 
 </div><!-- for id="content", starts in the include above -->
@@ -1073,7 +1227,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2021/02/18 16:32:29 $
+$Date: 2021/02/21 20:19:14 $
 <!-- timestamp end --></p>
 </div>
 </div><!-- for class="inner", starts in the banner include -->