From f47db4ac713c42997fde0e1437891f6a4b3437ba Mon Sep 17 00:00:00 2001
From: Lucie Anglade <lucie@courtbouillon.org>
Date: Fri, 4 Aug 2023 23:13:32 +0200
Subject: [PATCH] Remove w3 class and clean HTML structure

---
 themes/afpy/static/css/website.css         |  53 +++++++--
 themes/afpy/templates/archives.html        |  16 +--
 themes/afpy/templates/article.html         |  87 ++++++++-------
 themes/afpy/templates/author.html          |   4 +-
 themes/afpy/templates/authors.html         |   4 +-
 themes/afpy/templates/base.html            |  62 +++--------
 themes/afpy/templates/categories.html      |   4 +-
 themes/afpy/templates/category.html        |  35 +++---
 themes/afpy/templates/index.html           | 123 ++++++++++-----------
 themes/afpy/templates/page.html            |  10 +-
 themes/afpy/templates/pagination.html      |  14 +--
 themes/afpy/templates/period_archives.html |  16 +--
 themes/afpy/templates/tag.html             |   4 +-
 themes/afpy/templates/tags.html            |   4 +-
 14 files changed, 225 insertions(+), 211 deletions(-)

diff --git a/themes/afpy/static/css/website.css b/themes/afpy/static/css/website.css
index ff4185c..fb1fcf2 100644
--- a/themes/afpy/static/css/website.css
+++ b/themes/afpy/static/css/website.css
@@ -1,10 +1,45 @@
-@import "w3.css";
-@import "all.min.css";
+/* Fonts */
+@font-face{
+  font-family: Atkinson;
+  src: url(../webfonts/Atkinson-Hyperlegible-Regular-102.ttf);
+}
 
-@font-face{font-family:atkinson;src:url(../webfonts/Atkinson-Hyperlegible-Regular-102.ttf)}
-body, h1, h2, h3, h4, h5, h6{font-family:atkinson}
-img{width:100%}
-.logo{width:3em}
-iframe{background:#eaeaea;border:0;height:55em;width:100%}
-.w3-margin-bottom-32{margin-bottom:32px!important}
-.uppercase{text-transform:uppercase}
+
+/* Variables */
+
+:root {
+  --black: #0e0e0e;
+  --blue: #327bd6;
+  --dark-green: #32ada9;
+  --green: #ebff32;
+  --orange: #ff6f32;
+  --purple: #84326b;
+  --white: #ffffff;
+}
+
+
+/* Common */
+
+html {
+  background: var(--white);
+  color: var(--black);
+  font-family: sans-serif;
+  font-size: 14pt;
+  line-height: 1.5;
+}
+
+body {
+  margin: 0;
+}
+
+
+/* Header */
+
+header {
+  height: 4em;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+}
+  
diff --git a/themes/afpy/templates/archives.html b/themes/afpy/templates/archives.html
index cd12950..0fc84ec 100644
--- a/themes/afpy/templates/archives.html
+++ b/themes/afpy/templates/archives.html
@@ -3,12 +3,14 @@
 {% block title %}{{ SITENAME }} - Archives{% endblock %}
 
 {% block content %}
-<h1>Archives for {{ SITENAME }}</h1>
+  <section>
+    <h2>Archives for {{ SITENAME }}</h2>
 
-<dl>
-{% for article in dates %}
-    <dt>{{ article.locale_date }}</dt>
-    <dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
-{% endfor %}
-</dl>
+    <dl>
+      {% for article in dates %}
+      <dt>{{ article.locale_date }}</dt>
+      <dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
+      {% endfor %}
+    </dl>
+  </section>
 {% endblock %}
diff --git a/themes/afpy/templates/article.html b/themes/afpy/templates/article.html
index cb88a1c..cfeae45 100644
--- a/themes/afpy/templates/article.html
+++ b/themes/afpy/templates/article.html
@@ -18,48 +18,55 @@
   {% for tag in article.tags %}
     <meta name="tags" content="{{tag}}" />
   {% endfor %}
-
 {% endblock %}
 
 {% block content %}
-  <header>
-    <h1 class="entry-title">
-      <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark"
-         title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h1>
- {% import 'translations.html' as translations with context %}
- {{ translations.translations_for(article) }}
-  </header>
-  <footer class="post-info">
-    <time class="published" datetime="{{ article.date.isoformat() }}">
-      {{ article.locale_date }}
-    </time>
-    {% if article.modified %}
-    <time class="modified" datetime="{{ article.modified.isoformat() }}">
-      {{ article.locale_modified }}
-    </time>
-    {% endif %}
-    {% if article.authors %}
-    <address class="vcard author">
-      Par {% for author in article.authors %}
-          <a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
-        {% endfor %}
-    </address>
-    {% endif %}
-    {% if article.category %}
-    <div class="category">
+  <section>
+    <h2>{{ article.title }}</h2>
+    {% import 'translations.html' as translations with context %}
+    {{ translations.translations_for(article) }}
+    <aside>
+      <time datetime="{{ article.date.isoformat() }}">
+        {{ article.locale_date }}
+      </time>
+
+      {% if article.modified %}
+      <time datetime="{{ article.modified.isoformat() }}">
+        {{ article.locale_modified }}
+      </time>
+      {% endif %}
+
+      {% if article.authors %}
+      <section>
+        <p>Par</p>
+        <ul>
+          {% for author in article.authors %}
+          <li><a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a></li>
+          {% endfor %}
+        </ul>
+      </section>
+      {% endif %}
+
+      {% if article.category %}
+      <p>
         Categorie : <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
-    </div>
-    {% endif %}
-    {% if article.tags %}
-    <div class="tags">
-        Tags :
-        {% for tag in article.tags %}
-            <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
-        {% endfor %}
-    </div>
-    {% endif %}
-  </footer><!-- /.post-info -->
-  <article>
-    {{ article.content }}
-  </article>
+      </p>
+      {% endif %}
+
+      {% if article.tags %}
+      <section>
+        <p>Tags</p>
+        <ul>
+          {% for tag in article.tags %}
+          <li><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a></li>
+          {% endfor %}
+        </ul>
+      </section>
+      {% endif %}
+    </aside>
+
+    <article>
+      {{ article.content }}
+    </article>
+  </section>
 {% endblock %}
diff --git a/themes/afpy/templates/author.html b/themes/afpy/templates/author.html
index 79d22c7..26858c2 100644
--- a/themes/afpy/templates/author.html
+++ b/themes/afpy/templates/author.html
@@ -3,6 +3,8 @@
 {% block title %}{{ SITENAME }} - Articles by {{ author }}{% endblock %}
 
 {% block content_title %}
-<h1>Articles by {{ author }}</h1>
+<section>
+  <h2>Articles by {{ author }}</h2>
+</section>
 {% endblock %}
 
diff --git a/themes/afpy/templates/authors.html b/themes/afpy/templates/authors.html
index 9aee5db..6d10019 100644
--- a/themes/afpy/templates/authors.html
+++ b/themes/afpy/templates/authors.html
@@ -3,10 +3,12 @@
 {% block title %}{{ SITENAME }} - Authors{% endblock %}
 
 {% block content %}
-    <h1>Authors on {{ SITENAME }}</h1>
+  <section>
+    <h2>Authors on {{ SITENAME }}</h2>
     <ul>
     {% for author, articles in authors|sort %}
         <li><a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a> ({{ articles|count }})</li>
     {% endfor %}
     </ul>
+  </section>
 {% endblock %}
diff --git a/themes/afpy/templates/base.html b/themes/afpy/templates/base.html
index b45948b..2e23753 100644
--- a/themes/afpy/templates/base.html
+++ b/themes/afpy/templates/base.html
@@ -14,57 +14,31 @@
 
   <body>
     <header>
-      <!-- Navigation bar -->
-      <div class="w3-bar w3-card w3-border-bottom w3-large">
-        <a href="/" class="w3-bar-item w3-button w3-hover-orange"><img src="/static/img/logo.svg" class="w3-margin-right logo" alt="Association Francophone Python" /> <span class="w3-margin-left">AFPY</span></a>
-        <div class="w3-hide-medium w3-hide-small">
-          <a href="/pages/adhesions" class="w3-bar-item w3-button w3-right w3-hover-orange w3-margin-top">Adhésion</a>
-          <a href="/pages/communaute" class="w3-bar-item w3-button w3-right w3-hover-orange w3-margin-top">Communauté</a>
-          <a href="/category/jobs" class="w3-bar-item w3-button w3-right w3-hover-orange w3-margin-top">Offres d'emploi</a>
-          <a href="/category/news" class="w3-bar-item w3-button w3-right w3-hover-orange w3-margin-top">Actualités</a>
-          <a href="/pages/qui-sommes-nous" class="w3-bar-item w3-button w3-right w3-hover-orange w3-margin-top">Qui sommes-nous ?</a>
-          <a href="/" class="w3-bar-item w3-button w3-right w3-hover-orange w3-margin-top">Accueil</a>
-        </div>
+      <h1><a href="/">AFPy</a></h1>
 
-        <!-- Toggle menu on small screens -->
-        <a class="w3-bar-item w3-button w3-right w3-hide-large w3-padding-large w3-hover-orange w3-large" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
-      </div>
-      <!-- Navigation bar on small screens -->
-      <div id="navSmall" class="w3-bar-block w3-white w3-card w3-hide w3-large">
-        <a href="/" class="w3-bar-item w3-button w3-padding-large w3-hover-orange">Accueil</a>
-        <a href="/pages/qui-sommes-nous" class="w3-bar-item w3-button w3-padding-large w3-hover-orange">Qui sommes-nous ?</a>
-        <a href="#" class="w3-bar-item w3-button w3-padding-large w3-hover-orange">Actualités</a>
-        <a href="#" class="w3-bar-item w3-button w3-padding-large w3-hover-orange">Offres d'emploi</a>
-        <a href="/pages/communaute" class="w3-bar-item w3-button w3-padding-large w3-hover-orange">Communauté</a>
-        <a href="/pages/adhesions" class="w3-bar-item w3-button w3-padding-large w3-hover-orange">Adhésion</a>
-      </div>
+      <nav>
+        <a href="/">Accueil</a>
+        <a href="/pages/qui-sommes-nous">Qui sommes-nous ?</a>
+        <a href="/category/news">Actualités</a>
+        <a href="/category/jobs">Offres d'emploi</a>
+        <a href="/pages/communaute">Communauté</a>
+        <a href="/pages/adhesions">Adhésion</a>
+      </nav>
     </header>
 
-    <main class="w3-content w3-padding">
+    <main>
     {% block content %}
     {% endblock %}
     </main>
 
-    <!-- Footer -->
-    <footer class="w3-container w3-orange w3-card-4 w3-center w3-padding">
-      <a href="/pages/contact" class="w3-button w3-hover-grey uppercase">Contact</a>
-      <a href="/pages/charte" class="w3-button w3-hover-grey uppercase">Charte</a>
-      <a href="/pages/mentions-legales" class="w3-button w3-hover-grey uppercase">Mentions légales</a>
-      <a href="/pages/flux-rss" class="w3-button w3-hover-grey uppercase">Flux RSS</a>
-      <a href="https://mamot.fr/@AFPy" class="w3-button w3-hover-grey uppercase">Mastodon</a>
-      <a href="https://twitter.com/asso_python_fr" class="w3-button w3-hover-grey uppercase">Twitter</a>
+    <footer>
+      <a href="/pages/contact">Contact</a>
+      <a href="/pages/charte">Charte</a>
+      <a href="/pages/mentions-legales">Mentions légales</a>
+      <a href="/pages/flux-rss">Flux RSS</a>
+      <a href="https://mamot.fr/@AFPy">Mastodon</a>
+      <a href="https://twitter.com/asso_python_fr">Twitter</a>
+      <a href="https://www.linkedin.com/company/afpy">LinkedIn</a>
     </footer>
-
-    <script>
-    // Used to toggle the menu on small screens
-    function myFunction() {
-      var x = document.getElementById("navSmall");
-      if (x.className.indexOf("w3-hide") == -1) {
-        x.className += " w3-hide";
-      } else {
-        x.className = x.className.replace(" w3-hide", "");
-      }
-    }
-    </script>
   </body>
 </html>
diff --git a/themes/afpy/templates/categories.html b/themes/afpy/templates/categories.html
index 7999de4..f327f18 100644
--- a/themes/afpy/templates/categories.html
+++ b/themes/afpy/templates/categories.html
@@ -3,10 +3,12 @@
 {% block title %}{{ SITENAME }} - Categories{% endblock %}
 
 {% block content %}
-    <h1>Categories on {{ SITENAME }}</h1>
+  <section>
+    <h2>Categories on {{ SITENAME }}</h2>
     <ul>
     {% for category, articles in categories|sort %}
         <li><a href="{{ SITEURL }}/{{ category.url }}">{{ category }}</a> ({{ articles|count }})</li>
     {% endfor %}
     </ul>
+  </section>
 {% endblock %}
diff --git a/themes/afpy/templates/category.html b/themes/afpy/templates/category.html
index 1c2c5f5..50249de 100644
--- a/themes/afpy/templates/category.html
+++ b/themes/afpy/templates/category.html
@@ -3,31 +3,26 @@
 {% block title %}{{ SITENAME }} - {{ category }}{% endblock %}
 
 {% block content %}
-  <section class="w3-content w3-padding w3-center">
-    <h1>{{ "Actualités" if category=="news" else "Offres d'emploi" }}</h1>
-    <div class="w3-row-padding">
+    <h2>{{ "Actualités" if category=="news" else "Offres d'emploi" }}</h2>
       {% for article in articles_page.object_list if article.category == category %}
-      <article class="w3-left-align w3-card w3-margin w3-margin-bottom-32">
-        <header class="w3-container w3-orange">
-          <time class="w3-right w3-margin-top" datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time>
-          <h2 class=""><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2>
-        </header>
-        <div class="w3-container">
-          <p>{{ article.summary }}</p>
-        </div>
-        <footer class="w3-container">
-          <div class="w3-right">
-            <address class="w3-margin-bottom">Par
-            {% for author in article.authors %}{{ author }}{% endfor %}
-            </address>
-          </div>
-        </footer>
+      <article>
+        <section>
+          <time datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time>
+          <h3><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h3>
+        </section>
+        <p>{{ article.summary }}</p>
+        <section>
+          <p>Par</p>
+          <ul>
+            {% for author in article.authors %}
+            <li>{{ author }}</li>
+            {% endfor %}
+          </ul>
+        </section>
       </article>
       {% endfor %}
       {% if articles_page.has_other_pages() %}
           {% include 'pagination.html' %}
       {% endif %}
-    </div>
-  </section>
 {% endblock %}
 
diff --git a/themes/afpy/templates/index.html b/themes/afpy/templates/index.html
index f744c51..425b94d 100644
--- a/themes/afpy/templates/index.html
+++ b/themes/afpy/templates/index.html
@@ -1,77 +1,66 @@
 {% extends "base.html" %}
 {% block content %}
-  <section class="w3-content w3-padding w3-center w3-hide-small">
-    <h1>l'AFPy c'est</h1>
-    <div class="w3-row-padding">
-      <div class="w3-half">
-        <div class="w3-container w3-margin w3-card">
-          <h2>Une communauté</h2>
-          <div class="w3-left-align">
-            <p>Un forum dynamique (Discourse)</p>
-            <p>Des salons de discussion en temps réel (IRC & Discord)</p>
-            <p>&nbsp;</p>
-          </div>
-        </div>
-      </div>
-      <div class="w3-half">
-        <div class="w3-container w3-margin w3-card">
-          <h2>Des événements</h2>
-          <div class="w3-left-align">
-            <p>L'organisation annuelle de la <a href="https://pycon.fr/">PyConFr</a></p>
-            <p>Les <a href="https://discuss.afpy.org/c/meetups/12">Meetups</a></p>
-            <p>Les ateliers de traduction</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="w3-row-padding w3-center">
-      <div class="w3-half">
-        <div class="w3-container w3-margin w3-card">
-          <h2>Des outils</h2>
-          <div class="w3-left-align">
-            <p>Une plateforme de Visio-conférence (Big Blue Button)</p>
-            <p>Un gestionnaire de dépôts (Gitea)</p>
-            <p>Un site d'apprentissage par exercices : <a href="https://hackinscience.org/">Hackinscience</a> (Licence CC0)</p>
-          </div>
-        </div>
-      </div>
-      <div class="w3-half">
-        <div class="w3-container w3-margin w3-card">
-          <h2>Du contenu</h2>
-          <div class="w3-left-align">
-            <p>Des offres d'emploi</p>
-            <p>La traduction de <a href="https://docs.python.org/fr">la documentation de Python</a> (Licence MIT)</p>
-            <p>&nbsp;</p>
-          </div>
-        </div>
-      </div>
-    </div>
+  <section>
+    <h2>l'AFPy c'est</h2>
+    <article>
+      <h3>Une communauté</h3>
+      <ul>
+        <li>Un forum dynamique (Discourse)</li>
+        <li>Des salons de discussion en temps réel (IRC & Discord)</li>
+        <li>&nbsp;</li>
+      </ul>
+    </article>
+
+    <article>
+      <h3>Des événements</h3>
+      <ul>
+        <li>L'organisation annuelle de la <a href="https://pycon.fr/">PyConFr</a></li>
+        <li>Les <a href="https://discuss.afpy.org/c/meetups/12">Meetups</a></li>
+        <li>Les ateliers de traduction</li>
+      </ul>
+    </article>
+
+    <article>
+      <h3>Des outils</h3>
+      <ul>
+        <li>Une plateforme de Visio-conférence (Big Blue Button)</li>
+        <li>Un gestionnaire de dépôts (Gitea)</li>
+        <li>Un site d'apprentissage par exercices : <a href="https://hackinscience.org/">Hackinscience</a> (Licence CC0)</li>
+      </ul>
+    </article>
+
+    <article>
+      <h3>Du contenu</h3>
+      <ul>
+        <li>Des offres d'emploi</li>
+        <li>La traduction de <a href="https://docs.python.org/fr">la documentation de Python</a> (Licence MIT)</li>
+        <li>&nbsp;</li>
+      </ul>
+    </article>
+
     <p>Il est possible de soutenir les projets de l'AFPy <a href="/pages/adhesions">en cotisant ou en effectuant un don.</a></p>
   </section>
 
-  <section class="w3-content w3-padding w3-center">
-    <h1>Dernières actualités</h1>
-    <div class="w3-row-padding">
-      {% for article in articles if article.category == "news" %}
+  <section>
+    <h2>Dernières actualités</h2>
+    {% for article in articles if article.category == "news" %}
       {% if loop.index < 4 %}
-      <article class="w3-left-align w3-card w3-margin w3-margin-bottom-32">
-        <header class="w3-container w3-orange">
-          <time class="w3-right w3-margin-top" datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time>
-          <h2 class=""><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2>
-        </header>
-        <div class="w3-container">
-          <p>{{ article.summary }}</p>
-        </div>
-        <footer class="w3-container">
-          <div class="w3-right">
-            <address class="w3-margin-bottom">Par
-            {% for author in article.authors %}{{ author }}{% endfor %}
-            </address>
-          </div>
-        </footer>
+      <article>
+        <section>
+          <time datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time>
+          <h3><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h3>
+        </section>
+        <p>{{ article.summary }}</p>
+        <section>
+          <p>Par</p>
+          <ul>
+            {% for author in article.authors %}
+            <li>{{ author }}</li>
+            {% endfor %}
+          </ul>
+        </section>
       </article>
       {% endif %}
-      {% endfor %}
-    </div>
+    {% endfor %}
   </section>
 {% endblock content %}
diff --git a/themes/afpy/templates/page.html b/themes/afpy/templates/page.html
index 43ea29e..2a1afaa 100644
--- a/themes/afpy/templates/page.html
+++ b/themes/afpy/templates/page.html
@@ -13,15 +13,17 @@
 {% endblock %}
 
 {% block content %}
-    <h1>{{ page.title }}</h1>
+  <section>
+    <h2>{{ page.title }}</h2>
     {% import 'translations.html' as translations with context %}
     {{ translations.translations_for(page) }}
 
     {{ page.content }}
 
     {% if page.modified %}
-        <p>
-        Last updated: {{ page.locale_modified }}
-        </p>
+    <aside>
+      <p>Last updated: {{ page.locale_modified }}</p>
+    </aside>
     {% endif %}
+  </section>
 {% endblock %}
diff --git a/themes/afpy/templates/pagination.html b/themes/afpy/templates/pagination.html
index 3444786..327c53c 100644
--- a/themes/afpy/templates/pagination.html
+++ b/themes/afpy/templates/pagination.html
@@ -1,19 +1,17 @@
 {% if DEFAULT_PAGINATION %}
 {% set first_page = articles_paginator.page(1) %}
 {% set last_page = articles_paginator.page(articles_paginator.num_pages) %}
-<p class="w3-bar">
+<ul>
   {% if articles_page.has_previous() %}
-  <a href="{{ SITEURL }}/{{ articles_previous_page.url }}" class="w3-button w3-hover-orange">&laquo;</a>
-  {% else %}
-  <span class="w3-padding">&laquo;</span>
+  <li><a href="{{ SITEURL }}/{{ articles_previous_page.url }}">&laquo;</a></li>
   {% endif %}
+
   {% for page in range(1, articles_paginator.num_pages + 1) %}
-  <a href="{{ SITEURL }}/{{ articles_paginator.page(page).url }}" class="w3-button w3-hover-orange">{{ page }}</a>
+  <li><a href="{{ SITEURL }}/{{ articles_paginator.page(page).url }}">{{ page }}</a></li>
   {% endfor %}
+
   {% if articles_page.has_next() %}
-  <a href="{{ SITEURL }}/{{ articles_next_page.url }}" class="w3-button w3-hover-orange">&raquo;</a>
-  {% else %}
-  <span class="w3-padding">&raquo;</span>
+  <li><a href="{{ SITEURL }}/{{ articles_next_page.url }}">&raquo;</a></li>
   {% endif %}
 </p>
 {% endif %}
diff --git a/themes/afpy/templates/period_archives.html b/themes/afpy/templates/period_archives.html
index e1ddf62..16dd5a7 100644
--- a/themes/afpy/templates/period_archives.html
+++ b/themes/afpy/templates/period_archives.html
@@ -3,12 +3,14 @@
 {% block title %}{{ SITENAME }} - {{ period | reverse | join(' ') }} archives{% endblock %}
 
 {% block content %}
-<h1>Archives for {{ period | reverse | join(' ') }}</h1>
+  <section>
+    <h2>Archives for {{ period | reverse | join(' ') }}</h2>
 
-<dl>
-{% for article in dates %}
-    <dt>{{ article.locale_date }}</dt>
-    <dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
-{% endfor %}
-</dl>
+    <dl>
+      {% for article in dates %}
+      <dt>{{ article.locale_date }}</dt>
+      <dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
+      {% endfor %}
+    </dl>
+  </section>
 {% endblock %}
diff --git a/themes/afpy/templates/tag.html b/themes/afpy/templates/tag.html
index 9387813..c85df0a 100644
--- a/themes/afpy/templates/tag.html
+++ b/themes/afpy/templates/tag.html
@@ -3,5 +3,7 @@
 {% block title %}{{ SITENAME }} - {{ tag }} tag{% endblock %}
 
 {% block content_title %}
-<h1>Articles tagged with {{ tag }}</h1>
+  <section>
+    <h2>Articles tagged with {{ tag }}</h2>
+  </section>
 {% endblock %}
diff --git a/themes/afpy/templates/tags.html b/themes/afpy/templates/tags.html
index b90b0ac..6606927 100644
--- a/themes/afpy/templates/tags.html
+++ b/themes/afpy/templates/tags.html
@@ -3,10 +3,12 @@
 {% block title %}{{ SITENAME }} - Tags{% endblock %}
 
 {% block content %}
-    <h1>Tags for {{ SITENAME }}</h1>
+  <section>
+    <h2>Tags for {{ SITENAME }}</h2>
     <ul>
     {% for tag, articles in tags|sort %}
         <li><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a> ({{ articles|count }})</li>
     {% endfor %}
     </ul>
+  </section>
 {% endblock %}