44
45
46
47
48
49
50
51
52
53
54
55
56
  | 
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
  | 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
  | 
* A *plural noun* which applies to all its member articles as a group (e.g. “Speculations”)
* A *singular noun* with an indefinite article “a” or ”an”, which applies to each of its member articles individually (e.g. “a speculation”).
* A *document body* which appears on the series’s main page, and whose markup also dictates whether/how the listing of its member articles will be presented.
## Visual Design
The stuff described above gets translated into web and print designs.
## HTML markup
**“Listing” context: complete articles/notes:**
    <!-- Article with a title -->
    <article>
      <h1 class="entry-title hentry">ARTICLE TITLE</h1>
      <p class="time">
        <a href="#here" class="rel-bookmark">
          <time datetime="2017-11-08" class="published">November 8, 2017</time>
        </a>
      </p>
      <section class="entry-content">ARTICLE BODY
      </section> 
      <footer class="article-info">
        <span class="x">(</span>
        This is ARTICLE-NOUN, part of <a href="#">‘Series Name’</a>.
        <span class="x">)</span>
      </footer>
    </article>
    <!-- Article without a title -->
    <article>
      <h1 class="no-title hentry">
        <a href="#here" class="rel-bookmark">
          <time datetime="2017-11-08" class="entry-title published">November 8, 2017</time>
        </a>
      </h1>
      <section class="entry-content">ARTICLE BODY
      </section>
      <footer class="article-info">
        <span class="x">(</span>
        This is ARTICLE-NOUN, part of <a href="#">‘Series Name’</a>.
        <span class="x">)</span>
      </footer>
    </article>
    <!-- Notes -->
    <article class="with-title hentry">
      <h1 class="entry-title">A note from AUTHOR, re: <a class="cross-reference" href="#">PARENT-TITLE</a></h1>
      <p class="time"><a href="#here" class="rel-bookmark note-permlink">
        <time datetime="2004-04-24">April 24, 2004</time>
      </a></p>
      <section class="entry-content">
        NOTE CONTENTS
        <p class="signoff"><i>— <a href="AUTHOR-URL">AUTHOR</a></i></p>
      </section>
    </article>
Coming at some point:
* Typographic conventions
* Web design notes (HTML markup structure, etc)
* Print design notes
 |