Repository: getpelican/pelican (language: python)

Issue:
Use classless semantic HTML in the "simple" theme
- [x] I have searched the [issues](https://github.com/getpelican/pelican/issues?q=is%3Aissue) (including closed ones) and believe that this is not a duplicate.
- [x] I have searched the [documentation](https://docs.getpelican.com/) and believe that my question is not covered.
- [x] I am willing to lend a hand to help implement this feature.

## Feature Request

### Premise

Currently, in the "simple" theme there is no style sheet and it uses semantic HTML almost entirely, but not completely yet.

### Proposal

I propose to remove any class references from the HTML code, which are not used anyway, and make the HTML code entirely semantic.

### Feature

- [x] **cleaner and lighter HTML code**, thanks to the removal of unused parts _(e.g. classes, ids, comments)_
- [x] **more accessible web pages**, thanks to the use of only semantic HTML
- [x] **responsive web pages with dark and light** modes, thanks to the addition of just the URL of one of the [many classless CSS frameworks available](https://github.com/dbohdan/classless-css).
- [x] **web pages more easily navigable by screen readers and assistive technologies**, thanks to a correct hierarchy of components in the DOM


Discussion / hints:
> cleaner and lighter HTML code, thanks to the removal of unused parts (e.g. classes, ids, comments)

I get the other two but "comments"? Unused in rendering, yes, but they are not useless. Especially for a theme that's supposed to be a starter template for people to write their own.
I provided the working PR #3234 (yet not tests complete)
I tried the "simple" theme combined with some classless CSS frameworks found in this list: "Awesome Classless CSS"
https://github.com/dbohdan/classless-css

Below are some screenshots of the various versions of my website using the updated "simple" theme, simply by providing a different URL in the `STYLESHEET_URL` setting, as shown in the example below

```python
STYLESHEET_URL = "https://cdn.simplecss.org/simple.min.css"
```
### Bamboo
```python
STYLESHEET_URL = "https://unpkg.com/bamboo.css"
```
dark | light
---- | -----
![bamboo dark-min](https://github.com/getpelican/pelican/assets/521097/5261040d-7ba1-41bb-9178-29f6689a7bbe) | ![bamboo light-min](https://github.com/getpelican/pelican/assets/521097/47fcaaa8-39c1-43d6-ace2-b01f614ac1e1)

### Holiday
```python
STYLESHEET_URL = "https://cdn.jsdelivr.net/npm/holiday.css@0.11.2"
```
dark | light
---- | -----
![holiday dark-min](https://github.com/getpelican/pelican/assets/521097/171d9b7c-b025-4ca9-af4b-51ecb787d595) | ![holiday light-min](https://github.com/getpelican/pelican/assets/521097/decff437-d27b-450b-8a6b-3b008dd360b5)

### Missing
```python
STYLESHEET_URL = "https://unpkg.com/missing.css@1.1.1"
```
dark | light
---- | -----
![missing dark-min](https://github.com/getpelican/pelican/assets/521097/1bf35ef0-a823-487b-aab9-f9cb0c0a8175) | ![missing light-min](https://github.com/getpelican/pelican/assets/521097/141a5d15-5165-4749-88fe-16161f77dcbd)

### Pico
```python
STYLESHEET_URL = "https://cdn.jsdelivr.net/npm/@picocss/pico@next/css/pico.classless.min.css"
```
dark | light
---- | -----
![pico dark-min](https://github.com/getpelican/pelican/assets/521097/6e37c150-5c41-4d7f-ad82-3041c9523833) | ![pico light-min](https://github.com/getpelican/pelican/assets/521097/a615be9e-2a4f-4908-9ed5-27521c8e3154)

### Simple
```python
STYLESHEET_URL = "https://cdn.simplecss.org/simple.min.css"
```
dark | light
---- | -----
![simple dark-min](https://github.com/getpelican/pelican/assets/521097/13b8dd28-9b8c-4ce1-b171-e4d7544091db) | ![simple light-min](https://github.com/getpelican/pelican/assets/521097/b4ccce10-523d-4b8e-a150-ec487531a1be)

### SpCSS
```python
STYLESHEET_URL = "https://cdn.jsdelivr.net/npm/spcss@0.9.0"
```
dark | light
---- | -----
![spcss dark-min](https://github.com/getpelican/pelican/assets/521097/72ee6113-bab0-456f-87ca-59c45cfa6e5d) | ![spcss light-min](https://github.com/getpelican/pelican/assets/521097/9be5237b-e8f8-4a51-9fe7-782f52943429)

### Tufte CSS
```python
STYLESHEET_URL = "https://unpkg.com/tufte-css@1.8.0/tufte.min.css"
```
dark | light
---- | -----
![tufte dark-min](https://github.com/getpelican/pelican/assets/521097/79d6ae50-1027-461a-b63b-6566e3fa3689) | ![tufte light-min](https://github.com/getpelican/pelican/assets/521097/85fde574-aedb-40f7-8176-44d3e6dc9b31)

### Water
```python
STYLESHEET_URL = "https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css"
```
dark | light
---- | -----
![water dark-min](https://github.com/getpelican/pelican/assets/521097/5895cc07-5822-47c0-8a55-afb4ccf20d76) | ![water light-min](https://github.com/getpelican/pelican/assets/521097/7852360b-723f-4fdc-b2dc-04020393e7eb)

### Default
Web page as rendered by Firefox with no `STYLESHEET_URL`.
![default-min](https://github.com/getpelican/pelican/assets/521097/151018db-b25a-4280-8a33-01b245473efe)


Fix patch:
diff --git a/.gitignore b/.gitignore
index b27f3eb92..473efea26 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,4 @@ samples/output
 *.pem
 *.lock
 .pdm-python
+.venv
diff --git a/docs/settings.rst b/docs/settings.rst
index a77685147..88a32d239 100644
--- a/docs/settings.rst
+++ b/docs/settings.rst
@@ -1231,6 +1231,12 @@ Following are example ways to specify your preferred theme::
     # Specify a customized theme, via absolute path
     THEME = "/home/myuser/projects/mysite/themes/mycustomtheme"
 
+The built-in ``simple`` theme can be customized using the following settings.
+
+.. data:: STYLESHEET_URL
+
+   The URL of the stylesheet to use.
+
 The built-in ``notmyidea`` theme can make good use of the following settings.
 Feel free to use them in your themes as well.
 
diff --git a/pelican/themes/simple/templates/archives.html b/pelican/themes/simple/templates/archives.html
index b7754c455..c7fb2127f 100644
--- a/pelican/themes/simple/templates/archives.html
+++ b/pelican/themes/simple/templates/archives.html
@@ -3,7 +3,7 @@
 {% block title %}{{ SITENAME|striptags }} - Archives{% endblock %}
 
 {% block content %}
-<h1>Archives for {{ SITENAME }}</h1>
+<h2>Archives for {{ SITENAME }}</h2>
 
 <dl>
 {% for article in dates %}
diff --git a/pelican/themes/simple/templates/article.html b/pelican/themes/simple/templates/article.html
index a17f2759c..07e5534dd 100644
--- a/pelican/themes/simple/templates/article.html
+++ b/pelican/themes/simple/templates/article.html
@@ -22,44 +22,44 @@
 {% endblock %}
 
 {% block content %}
+<article>
   <header>
-    <h1 class="entry-title">
+    <h2>
       <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark"
-         title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h1>
+         title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2>
  {% import 'translations.html' as translations with context %}
  {{ translations.translations_for(article) }}
   </header>
-  <footer class="post-info">
-    <time class="published" datetime="{{ article.date.isoformat() }}">
+  {{ article.content }}
+  <footer>
+    <p>Published: <time datetime="{{ article.date.isoformat() }}">
       {{ article.locale_date }}
-    </time>
+    </time></p>
     {% if article.modified %}
-    <time class="modified" datetime="{{ article.modified.isoformat() }}">
+    <p>Last updated: <time datetime="{{ article.modified.isoformat() }}">
       {{ article.locale_modified }}
-    </time>
+    </time></p>
     {% endif %}
     {% if article.authors %}
-    <address class="vcard author">
+    <address>
       By {% for author in article.authors %}
-          <a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
+          <a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
         {% endfor %}
     </address>
     {% endif %}
     {% if article.category %}
-    <div class="category">
+    <p>
         Category: <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
-    </div>
+    </p>
     {% endif %}
     {% if article.tags %}
-    <div class="tags">
+    <p>
         Tags:
         {% for tag in article.tags %}
             <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
         {% endfor %}
-    </div>
+    </p>
     {% endif %}
-  </footer><!-- /.post-info -->
-  <article>
-    {{ article.content }}
+  </footer>
   </article>
 {% endblock %}
diff --git a/pelican/themes/simple/templates/author.html b/pelican/themes/simple/templates/author.html
index c054f8ab3..9b30dfe22 100644
--- a/pelican/themes/simple/templates/author.html
+++ b/pelican/themes/simple/templates/author.html
@@ -3,5 +3,5 @@
 {% block title %}{{ SITENAME|striptags }} - Articles by {{ author }}{% endblock %}
 
 {% block content_title %}
-<h1>Articles by {{ author }}</h1>
+<h2>Articles by {{ author }}</h2>
 {% endblock %}
diff --git a/pelican/themes/simple/templates/authors.html b/pelican/themes/simple/templates/authors.html
index 9b80b499d..01b4f6f17 100644
--- a/pelican/themes/simple/templates/authors.html
+++ b/pelican/themes/simple/templates/authors.html
@@ -3,7 +3,7 @@
 {% block title %}{{ SITENAME|striptags }} - Authors{% endblock %}
 
 {% block content %}
-    <h1>Authors on {{ SITENAME }}</h1>
+    <h2>Authors on {{ SITENAME }}</h2>
     <ul>
     {% for author, articles in authors|sort %}
         <li><a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a> ({{ articles|count }})</li>
diff --git a/pelican/themes/simple/templates/base.html b/pelican/themes/simple/templates/base.html
index 94a16930e..e006cba15 100644
--- a/pelican/themes/simple/templates/base.html
+++ b/pelican/themes/simple/templates/base.html
@@ -6,6 +6,12 @@
         <meta charset="utf-8" />
         <meta name="generator" content="Pelican" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        {% if SITESUBTITLE %}
+        <meta name="description" content="{{ SITESUBTITLE }}" />
+        {% endif %}
+        {% if STYLESHEET_URL %}
+        <link rel="stylesheet" type="text/css" href="{{ STYLESHEET_URL }}" />
+        {% endif %}
         {% if FEED_ALL_ATOM %}
         <link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME|striptags }} Full Atom Feed" />
         {% endif %}
@@ -35,32 +41,32 @@
 
 <body>
         <header>
-                <h1><a href="{{ SITEURL }}/">{{ SITENAME }}{% if SITESUBTITLE %} <strong>{{ SITESUBTITLE }}</strong>{% endif %}</a></h1>
-        </header>
+              <hgroup><h1><a href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>{% if SITESUBTITLE %}<p>{{ SITESUBTITLE }}</p>{% endif %}</hgroup>
         <nav><ul>
         {% for title, link in MENUITEMS %}
             <li><a href="{{ link }}">{{ title }}</a></li>
         {% endfor %}
         {% if DISPLAY_PAGES_ON_MENU %}
           {% for p in pages %}
-            <li{% if p == page %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a></li>
+            <li><a href="{{ SITEURL }}/{{ p.url }}" {% if p==page %} aria-current="page" {% endif %}>{{ p.title }}</a></li>
           {% endfor %}
         {% endif %}
         {% if DISPLAY_CATEGORIES_ON_MENU %}
           {% for cat, null in categories %}
-            <li{% if cat == category %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
+            <li><a href="{{ SITEURL }}/{{ cat.url }}" {% if cat==category %} aria-current="page" {% endif %}>{{ cat}}</a></li>
           {% endfor %}
         {% endif %}
         </ul></nav>
+        </header>
         <main>
         {% block content %}
         {% endblock %}
         </main>
         <footer>
-                <address id="about" class="vcard body">
+                <address>
                 Proudly powered by <a rel="nofollow" href="https://getpelican.com/">Pelican</a>,
                 which takes great advantage of <a rel="nofollow" href="https://www.python.org/">Python</a>.
-                </address><!-- /#about -->
+                </address>
         </footer>
 </body>
 </html>
diff --git a/pelican/themes/simple/templates/categories.html b/pelican/themes/simple/templates/categories.html
index f099e88f4..7da19fb4f 100644
--- a/pelican/themes/simple/templates/categories.html
+++ b/pelican/themes/simple/templates/categories.html
@@ -3,7 +3,7 @@
 {% block title %}{{ SITENAME|striptags }} - Categories{% endblock %}
 
 {% block content %}
-    <h1>Categories on {{ SITENAME }}</h1>
+    <h2>Categories on {{ SITENAME }}</h2>
     <ul>
     {% for category, articles in categories|sort %}
         <li><a href="{{ SITEURL }}/{{ category.url }}">{{ category }}</a> ({{ articles|count }})</li>
diff --git a/pelican/themes/simple/templates/category.html b/pelican/themes/simple/templates/category.html
index da1a8b522..16525fb2f 100644
--- a/pelican/themes/simple/templates/category.html
+++ b/pelican/themes/simple/templates/category.html
@@ -3,5 +3,5 @@
 {% block title %}{{ SITENAME|striptags }} - {{ category }} category{% endblock %}
 
 {% block content_title %}
-<h1>Articles in the {{ category }} category</h1>
+<h2>Articles in the {{ category }} category</h2>
 {% endblock %}
diff --git a/pelican/themes/simple/templates/index.html b/pelican/themes/simple/templates/index.html
index ab4bc3459..c9837b54c 100644
--- a/pelican/themes/simple/templates/index.html
+++ b/pelican/themes/simple/templates/index.html
@@ -1,28 +1,27 @@
 {% extends "base.html" %}
 {% block content %}
-<section id="content">
 {% block content_title %}
 <h2>All articles</h2>
 {% endblock %}
 
-<ol id="post-list">
+
 {% for article in articles_page.object_list %}
-        <li><article class="hentry">
-                <header> <h2 class="entry-title"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2> </header>
-                <footer class="post-info">
-                    <time class="published" datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time>
-                    <address class="vcard author">By
+        <article>
+                <header> <h2><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2> </header>
+                <section>{{ article.summary }}</section>
+                <footer>
+                    <p>Published: <time datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time></p>
+                    <address>By
                     {% for author in article.authors %}
-                        <a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
+                        <a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
                     {% endfor %}
                     </address>
-                </footer><!-- /.post-info -->
-                <div class="entry-content"> {{ article.summary }} </div><!-- /.entry-content -->
-        </article></li>
+                </footer>
+        </article>
 {% endfor %}
-</ol><!-- /#posts-list -->
+
 {% if articles_page.has_other_pages() %}
     {% include 'pagination.html' %}
 {% endif %}
-</section><!-- /#content -->
+
 {% endblock content %}
diff --git a/pelican/themes/simple/templates/page.html b/pelican/themes/simple/templates/page.html
index eea816a98..38452d1d6 100644
--- a/pelican/themes/simple/templates/page.html
+++ b/pelican/themes/simple/templates/page.html
@@ -13,15 +13,21 @@
 {% endblock %}
 
 {% block content %}
-    <h1>{{ page.title }}</h1>
+<article>
+  <header>
+    <h2>{{ page.title }}</h2>
+  </header>
     {% import 'translations.html' as translations with context %}
     {{ translations.translations_for(page) }}
 
     {{ page.content }}
 
     {% if page.modified %}
+      <footer>
         <p>
         Last updated: {{ page.locale_modified }}
         </p>
+      </footer>
     {% endif %}
+</article>
 {% endblock %}
diff --git a/pelican/themes/simple/templates/pagination.html b/pelican/themes/simple/templates/pagination.html
index 588f130cd..45e7f1673 100644
--- a/pelican/themes/simple/templates/pagination.html
+++ b/pelican/themes/simple/templates/pagination.html
@@ -1,15 +1,17 @@
 {% if DEFAULT_PAGINATION %}
 {% set first_page = articles_paginator.page(1) %}
 {% set last_page = articles_paginator.page(articles_paginator.num_pages) %}
-<p class="paginator">
+<nav>
+  <ul>
     {% if articles_page.has_previous() %}
-        <a href="{{ SITEURL }}/{{ first_page.url }}">&#8647;</a>
-        <a href="{{ SITEURL }}/{{ articles_previous_page.url }}">&laquo;</a>
+        <li><a href="{{ SITEURL }}/{{ first_page.url }}">&Lang;</a></li>
+        <li><a href="{{ SITEURL }}/{{ articles_previous_page.url }}">&lang;</a></li>
     {% endif %}
-    Page {{ articles_page.number }} / {{ articles_paginator.num_pages }}
+    <li>Page {{ articles_page.number }} / {{ articles_paginator.num_pages }}</li>
     {% if articles_page.has_next() %}
-        <a href="{{ SITEURL }}/{{ articles_next_page.url }}">&raquo;</a>
-        <a href="{{ SITEURL }}/{{ last_page.url }}">&#8649;</a>
+        <li><a href="{{ SITEURL }}/{{ articles_next_page.url }}">&rang;</a></li>
+        <li><a href="{{ SITEURL }}/{{ last_page.url }}">&Rang;</a></li>
     {% endif %}
-</p>
+  </ul>
+</nav>
 {% endif %}
diff --git a/pelican/themes/simple/templates/period_archives.html b/pelican/themes/simple/templates/period_archives.html
index 9cdc354d1..595def506 100644
--- a/pelican/themes/simple/templates/period_archives.html
+++ b/pelican/themes/simple/templates/period_archives.html
@@ -3,7 +3,7 @@
 {% block title %}{{ SITENAME|striptags }} - {{ period | reverse | join(' ') }} archives{% endblock %}
 
 {% block content %}
-<h1>Archives for {{ period | reverse | join(' ') }}</h1>
+<h2>Archives for {{ period | reverse | join(' ') }}</h2>
 
 <dl>
 {% for article in dates %}
diff --git a/pelican/themes/simple/templates/tag.html b/pelican/themes/simple/templates/tag.html
index 59725a056..f9b71f483 100644
--- a/pelican/themes/simple/templates/tag.html
+++ b/pelican/themes/simple/templates/tag.html
@@ -3,5 +3,5 @@
 {% block title %}{{ SITENAME|striptags }} - {{ tag }} tag{% endblock %}
 
 {% block content_title %}
-<h1>Articles tagged with {{ tag }}</h1>
+<h2>Articles tagged with {{ tag }}</h2>
 {% endblock %}
diff --git a/pelican/themes/simple/templates/tags.html b/pelican/themes/simple/templates/tags.html
index 92c142d23..6b5c6b1ce 100644
--- a/pelican/themes/simple/templates/tags.html
+++ b/pelican/themes/simple/templates/tags.html
@@ -3,7 +3,7 @@
 {% block title %}{{ SITENAME|striptags }} - Tags{% endblock %}
 
 {% block content %}
-    <h1>Tags for {{ SITENAME }}</h1>
+    <h2>Tags for {{ SITENAME }}</h2>
     <ul>
     {% for tag, articles in tags|sort %}
         <li><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a> ({{ articles|count }})</li>


Test patch:
diff --git a/pelican/tests/output/custom/author/alexis-metaireau.html b/pelican/tests/output/custom/author/alexis-metaireau.html
index a9c73e6b9..aef8c6e6a 100644
--- a/pelican/tests/output/custom/author/alexis-metaireau.html
+++ b/pelican/tests/output/custom/author/alexis-metaireau.html
@@ -120,11 +120,13 @@ <h1><a href="../article-1.html" rel="bookmark"
 <p>There are <a href="../article-1.html#disqus_thread">comments</a>.</p>                </div><!-- /.entry-content -->
             </article></li>
                 </ol><!-- /#posts-list -->
-<p class="paginator">
-    Page 1 / 3
-        <a href="../author/alexis-metaireau2.html">&raquo;</a>
-        <a href="../author/alexis-metaireau3.html">&#8649;</a>
-</p>
+<nav>
+  <ul>
+    <li>Page 1 / 3</li>
+        <li><a href="../author/alexis-metaireau2.html">&rang;</a></li>
+        <li><a href="../author/alexis-metaireau3.html">&Rang;</a></li>
+  </ul>
+</nav>
                 </section><!-- /#content -->
         <section id="extras" class="body">
                 <div class="blogroll">
diff --git a/pelican/tests/output/custom/author/alexis-metaireau2.html b/pelican/tests/output/custom/author/alexis-metaireau2.html
index 41f00605e..8d17eed51 100644
--- a/pelican/tests/output/custom/author/alexis-metaireau2.html
+++ b/pelican/tests/output/custom/author/alexis-metaireau2.html
@@ -133,13 +133,15 @@ <h2>Why not ?</h2>
 <p>There are <a href="../oh-yeah.html#disqus_thread">comments</a>.</p>                </div><!-- /.entry-content -->
             </article></li>
                 </ol><!-- /#posts-list -->
-<p class="paginator">
-        <a href="../author/alexis-metaireau.html">&#8647;</a>
-        <a href="../author/alexis-metaireau.html">&laquo;</a>
-    Page 2 / 3
-        <a href="../author/alexis-metaireau3.html">&raquo;</a>
-        <a href="../author/alexis-metaireau3.html">&#8649;</a>
-</p>
+<nav>
+  <ul>
+        <li><a href="../author/alexis-metaireau.html">&Lang;</a></li>
+        <li><a href="../author/alexis-metaireau.html">&lang;</a></li>
+    <li>Page 2 / 3</li>
+        <li><a href="../author/alexis-metaireau3.html">&rang;</a></li>
+        <li><a href="../author/alexis-metaireau3.html">&Rang;</a></li>
+  </ul>
+</nav>
                 </section><!-- /#content -->
         <section id="extras" class="body">
                 <div class="blogroll">
diff --git a/pelican/tests/output/custom/author/alexis-metaireau3.html b/pelican/tests/output/custom/author/alexis-metaireau3.html
index 45a5f0d11..48fe75bae 100644
--- a/pelican/tests/output/custom/author/alexis-metaireau3.html
+++ b/pelican/tests/output/custom/author/alexis-metaireau3.html
@@ -85,11 +85,13 @@ <h1><a href="../tag/baz.html" rel="bookmark"
 <p>There are <a href="../tag/baz.html#disqus_thread">comments</a>.</p>                </div><!-- /.entry-content -->
             </article></li>
                 </ol><!-- /#posts-list -->
-<p class="paginator">
-        <a href="../author/alexis-metaireau.html">&#8647;</a>
-        <a href="../author/alexis-metaireau2.html">&laquo;</a>
-    Page 3 / 3
-</p>
+<nav>
+  <ul>
+        <li><a href="../author/alexis-metaireau.html">&Lang;</a></li>
+        <li><a href="../author/alexis-metaireau2.html">&lang;</a></li>
+    <li>Page 3 / 3</li>
+  </ul>
+</nav>
                 </section><!-- /#content -->
         <section id="extras" class="body">
                 <div class="blogroll">
diff --git a/pelican/tests/output/custom/index.html b/pelican/tests/output/custom/index.html
index ceb6e4f5f..6c4d7a94a 100644
--- a/pelican/tests/output/custom/index.html
+++ b/pelican/tests/output/custom/index.html
@@ -120,11 +120,13 @@ <h1><a href="./article-1.html" rel="bookmark"
 <p>There are <a href="./article-1.html#disqus_thread">comments</a>.</p>                </div><!-- /.entry-content -->
             </article></li>
                 </ol><!-- /#posts-list -->
-<p class="paginator">
-    Page 1 / 3
-        <a href="./index2.html">&raquo;</a>
-        <a href="./index3.html">&#8649;</a>
-</p>
+<nav>
+  <ul>
+    <li>Page 1 / 3</li>
+        <li><a href="./index2.html">&rang;</a></li>
+        <li><a href="./index3.html">&Rang;</a></li>
+  </ul>
+</nav>
                 </section><!-- /#content -->
         <section id="extras" class="body">
                 <div class="blogroll">
diff --git a/pelican/tests/output/custom/index2.html b/pelican/tests/output/custom/index2.html
index ddd4e96e1..043f8c334 100644
--- a/pelican/tests/output/custom/index2.html
+++ b/pelican/tests/output/custom/index2.html
@@ -133,13 +133,15 @@ <h2>Why not ?</h2>
 <p>There are <a href="./oh-yeah.html#disqus_thread">comments</a>.</p>                </div><!-- /.entry-content -->
             </article></li>
                 </ol><!-- /#posts-list -->
-<p class="paginator">
-        <a href="./index.html">&#8647;</a>
-        <a href="./index.html">&laquo;</a>
-    Page 2 / 3
-        <a href="./index3.html">&raquo;</a>
-        <a href="./index3.html">&#8649;</a>
-</p>
+<nav>
+  <ul>
+        <li><a href="./index.html">&Lang;</a></li>
+        <li><a href="./index.html">&lang;</a></li>
+    <li>Page 2 / 3</li>
+        <li><a href="./index3.html">&rang;</a></li>
+        <li><a href="./index3.html">&Rang;</a></li>
+  </ul>
+</nav>
                 </section><!-- /#content -->
         <section id="extras" class="body">
                 <div class="blogroll">
diff --git a/pelican/tests/output/custom/index3.html b/pelican/tests/output/custom/index3.html
index 698139a09..f8ebaac04 100644
--- a/pelican/tests/output/custom/index3.html
+++ b/pelican/tests/output/custom/index3.html
@@ -85,11 +85,13 @@ <h1><a href="./tag/baz.html" rel="bookmark"
 <p>There are <a href="./tag/baz.html#disqus_thread">comments</a>.</p>                </div><!-- /.entry-content -->
             </article></li>
                 </ol><!-- /#posts-list -->
-<p class="paginator">
-        <a href="./index.html">&#8647;</a>
-        <a href="./index2.html">&laquo;</a>
-    Page 3 / 3
-</p>
+<nav>
+  <ul>
+        <li><a href="./index.html">&Lang;</a></li>
+        <li><a href="./index2.html">&lang;</a></li>
+    <li>Page 3 / 3</li>
+  </ul>
+</nav>
                 </section><!-- /#content -->
         <section id="extras" class="body">
                 <div class="blogroll">
diff --git a/pelican/tests/output/custom_locale/author/alexis-metaireau.html b/pelican/tests/output/custom_locale/author/alexis-metaireau.html
index 41a21a98e..df76ccf65 100644
--- a/pelican/tests/output/custom_locale/author/alexis-metaireau.html
+++ b/pelican/tests/output/custom_locale/author/alexis-metaireau.html
@@ -120,11 +120,13 @@ <h1><a href="../posts/2011/février/17/article-1/" rel="bookmark"
 <p>There are <a href="../posts/2011/février/17/article-1/#disqus_thread">comments</a>.</p>                </div><!-- /.entry-content -->
             </article></li>
                 </ol><!-- /#posts-list -->
-<p class="paginator">
-    Page 1 / 3
-        <a href="../author/alexis-metaireau2.html">&raquo;</a>
-        <a href="../author/alexis-metaireau3.html">&#8649;</a>
-</p>
+<nav>
+  <ul>
+    <li>Page 1 / 3</li>
+        <li><a href="../author/alexis-metaireau2.html">&rang;</a></li>
+        <li><a href="../author/alexis-metaireau3.html">&Rang;</a></li>
+  </ul>
+</nav>
                 </section><!-- /#content -->
         <section id="extras" class="body">
                 <div class="blogroll">
diff --git a/pelican/tests/output/custom_locale/author/alexis-metaireau2.html b/pelican/tests/output/custom_locale/author/alexis-metaireau2.html
index 6412784f8..42a929d08 100644
--- a/pelican/tests/output/custom_locale/author/alexis-metaireau2.html
+++ b/pelican/tests/output/custom_locale/author/alexis-metaireau2.html
@@ -133,13 +133,15 @@ <h2>Why not ?</h2>
 <p>There are <a href="../posts/2010/octobre/20/oh-yeah/#disqus_thread">comments</a>.</p>                </div><!-- /.entry-content -->
             </article></li>
                 </ol><!-- /#posts-list -->
-<p class="paginator">
-        <a href="../author/alexis-metaireau.html">&#8647;</a>
-        <a href="../author/alexis-metaireau.html">&laquo;</a>
-    Page 2 / 3
-        <a href="../author/alexis-metaireau3.html">&raquo;</a>
-        <a href="../author/alexis-metaireau3.html">&#8649;</a>
-</p>
+<nav>
+  <ul>
+        <li><a href="../author/alexis-metaireau.html">&Lang;</a></li>
+        <li><a href="../author/alexis-metaireau.html">&lang;</a></li>
+    <li>Page 2 / 3</li>
+        <li><a href="../author/alexis-metaireau3.html">&rang;</a></li>
+        <li><a href="../author/alexis-metaireau3.html">&Rang;</a></li>
+  </ul>
+</nav>
                 </section><!-- /#content -->
         <section id="extras" class="body">
                 <div class="blogroll">
diff --git a/pelican/tests/output/custom_locale/author/alexis-metaireau3.html b/pelican/tests/output/custom_locale/author/alexis-metaireau3.html
index 2679b0a67..941cdc46a 100644
--- a/pelican/tests/output/custom_locale/author/alexis-metaireau3.html
+++ b/pelican/tests/output/custom_locale/author/alexis-metaireau3.html
@@ -85,11 +85,13 @@ <h1><a href="../tag/baz.html" rel="bookmark"
 <p>There are <a href="../tag/baz.html#disqus_thread">comments</a>.</p>                </div><!-- /.entry-content -->
             </article></li>
                 </ol><!-- /#posts-list -->
-<p class="paginator">
-        <a href="../author/alexis-metaireau.html">&#8647;</a>
-        <a href="../author/alexis-metaireau2.html">&laquo;</a>
-    Page 3 / 3
-</p>
+<nav>
+  <ul>
+        <li><a href="../author/alexis-metaireau.html">&Lang;</a></li>
+        <li><a href="../author/alexis-metaireau2.html">&lang;</a></li>
+    <li>Page 3 / 3</li>
+  </ul>
+</nav>
                 </section><!-- /#content -->
         <section id="extras" class="body">
                 <div class="blogroll">
diff --git a/pelican/tests/output/custom_locale/index.html b/pelican/tests/output/custom_locale/index.html
index 4a661093b..054011cc4 100644
--- a/pelican/tests/output/custom_locale/index.html
+++ b/pelican/tests/output/custom_locale/index.html
@@ -120,11 +120,13 @@ <h1><a href="./posts/2011/février/17/article-1/" rel="bookmark"
 <p>There are <a href="./posts/2011/février/17/article-1/#disqus_thread">comments</a>.</p>                </div><!-- /.entry-content -->
             </article></li>
                 </ol><!-- /#posts-list -->
-<p class="paginator">
-    Page 1 / 3
-        <a href="./index2.html">&raquo;</a>
-        <a href="./index3.html">&#8649;</a>
-</p>
+<nav>
+  <ul>
+    <li>Page 1 / 3</li>
+        <li><a href="./index2.html">&rang;</a></li>
+        <li><a href="./index3.html">&Rang;</a></li>
+  </ul>
+</nav>
                 </section><!-- /#content -->
         <section id="extras" class="body">
                 <div class="blogroll">
diff --git a/pelican/tests/output/custom_locale/index2.html b/pelican/tests/output/custom_locale/index2.html
index 60fee0859..fa2c4d2dd 100644
--- a/pelican/tests/output/custom_locale/index2.html
+++ b/pelican/tests/output/custom_locale/index2.html
@@ -133,13 +133,15 @@ <h2>Why not ?</h2>
 <p>There are <a href="./posts/2010/octobre/20/oh-yeah/#disqus_thread">comments</a>.</p>                </div><!-- /.entry-content -->
             </article></li>
                 </ol><!-- /#posts-list -->
-<p class="paginator">
-        <a href="./index.html">&#8647;</a>
-        <a href="./index.html">&laquo;</a>
-    Page 2 / 3
-        <a href="./index3.html">&raquo;</a>
-        <a href="./index3.html">&#8649;</a>
-</p>
+<nav>
+  <ul>
+        <li><a href="./index.html">&Lang;</a></li>
+        <li><a href="./index.html">&lang;</a></li>
+    <li>Page 2 / 3</li>
+        <li><a href="./index3.html">&rang;</a></li>
+        <li><a href="./index3.html">&Rang;</a></li>
+  </ul>
+</nav>
                 </section><!-- /#content -->
         <section id="extras" class="body">
                 <div class="blogroll">
diff --git a/pelican/tests/output/custom_locale/index3.html b/pelican/tests/output/custom_locale/index3.html
index 76597e82a..71ccb4b1c 100644
--- a/pelican/tests/output/custom_locale/index3.html
+++ b/pelican/tests/output/custom_locale/index3.html
@@ -85,11 +85,13 @@ <h1><a href="./tag/baz.html" rel="bookmark"
 <p>There are <a href="./tag/baz.html#disqus_thread">comments</a>.</p>                </div><!-- /.entry-content -->
             </article></li>
                 </ol><!-- /#posts-list -->
-<p class="paginator">
-        <a href="./index.html">&#8647;</a>
-        <a href="./index2.html">&laquo;</a>
-    Page 3 / 3
-</p>
+<nav>
+  <ul>
+        <li><a href="./index.html">&Lang;</a></li>
+        <li><a href="./index2.html">&lang;</a></li>
+    <li>Page 3 / 3</li>
+  </ul>
+</nav>
                 </section><!-- /#content -->
         <section id="extras" class="body">
                 <div class="blogroll">