Sample Markup
This is an introductory paragraph, most likely written not by the author herself but by VRAN or another editor. Our style is to place it in an inset box floated right at the top of the page. The markup is:
<div class="inset-intro">¶ ¶ This is an introductory....¶ ¶ </div>¶
Note that an inset-intro box comes first in the markup, before even the article’s subtitle or source block. See the markup source for this page.
This Is the Subtitle of the Article
Winlaw BC: This is the first paragraph of the article. If it begins with a dateline (a date or a place name from where the story originates), the markup for this paragraph begins with <span class="dateline"> ... </span>.
This is the second paragraph. Note that ordinary paragraphs such as this don’t require any <p> ... </p> paragraph markup, but do require separation from other blocks of markup by a blank line (extra carriage return) in the editor.
Capitalization & abbreviations
Replace ALL-CAPS text with strong (bold) or emphasis (italics). This applies to the page title, subheads, and all text within the text.
The only exception to this is text that is properly caps such as abbreviations. The proper markup for abbreviations is:
The vaccine was allowed by the FDA.
The vaccine was allowed by the <abbr title="Federal Drug Administration">FDA</abbr>.
Replace each instance of an abbreviation with this markup unless the abbreviation is immediately adjacent to its referent.
Subheads
Headlines are marked up using <h1> through <h6> tags. There is only one <h1> element on an HTML page — the title of the page (article) itself, created automatically by the WordPress template.
Any subheads that you mark up in the body of the article begin with <h2> and, if they nest any deeper than that, <h3> and so on. It’s unlikely that you’ll ever need to nest lower than <h2> or <h3> at the most.
Do not style subheads with <strong>.
Convert ALL-CAPS subheads to upper- & lowercase.
Remove a final colon from a subhead (Aardvarks not Aardvarks:) unless it seems required by its context.
Titles of works
The title of a primary reference (e.g., a book or monograph) such as The Golden Compass is marked up with a “title” span:
<span class="title">The Golden Compass</span>
Titles of secondary references (e.g., magazine articles and book chapters) are simply quoted as in “A Not-So-Perfect Vaccine”.
Strong and emphasis
In modern web production we don’t style text in the HTML markup with bold and italics, font names and sizes, colors, etc. These presentational elements are confined to the stylesheet that is separate from the HTML page itself.
What we do allow is to mark up text as being “strong” and “emphasized” — because these pertain to the meaning of the text — and then we apply typographical styles to this markup in the stylesheet.
- <strong>Strong text is currently styled as bold.</strong>
- <em>Emphasized text is currently styled as italic.</em>
Please do not use <strong> and <em> in place of more meaningful markup such as <h2> for headlines and <span class="title"> for book titles.
Special Characters
WordPress will automatically translate certain plain text characters to their fancy equivalents:
- "straight quotation marks" become “curly”
- 'straight apostrophes' become ‘curly’
- double hyphen – - becomes an m-dash — (please leave a space on either side of an m-dash to facilitate word-wrap)
Hyperlinks
A hyperlink to an external resource on another website is marked up like this:
<a href="http://example.com/">external resource</a>
Links that contain domain names must begin with http://.
A hyperlink to an internal resource on this website is marked up like so:
<a href="/about-vaccines/specific-vaccines/polio-vaccine/polio-perspectives">internal resource</a>
Links to internal resources do not contain the domain name but do begin with the slash in front of the initial folder name about-vaccines/ so that the browser will look for that folder in the root directory.
Place punctuation outside of hyperlinks:
I read the article 'Vitamin C'. I read the article '<a href="/alternatives/vitamin-c">Vitamin C</a>'.
A hyperlinked book title is one example of compound markup. You can place the hyperlink inside the “title” span or vice versa, but I think it makes more sense to put the hyperlink inside:
<span class="title"><a href="http://www.goldencompassmovie.com/">The Golden Compass</a></span>
This looks like The Golden Compass on the page.
Lists
There are two main types of list, ordered (numbered) and unordered (bulleted). For each type we have choices of list item markers; for example for ordered lists the markers can be Arabic numerals, Roman numerals both upper- and lowercase, and alphabetic letters both upper- and lowercase.
We’ve created classes in the stylesheet to allow us to specify the numbering system for ordered lists in the markup:
<ol>or<ol class="decimal">: Decimal numbers, beginning with 1 (the default)<ol class="lower-roman">: Lowercase roman numerals (i, ii, iii, iv, v, etc.)<ol class="upper-roman">: Uppercase roman numerals (I, II, III, IV, V, etc.)<ol class="lower-alpha">: Lowercase ascii letters (a, b, c, … z)<ol class="upper-alpha">: Uppercase ascii letters (A, B, C, … Z)
References
A list of references is in fact a list — and is marked up as a list in HTML, either:
<ol> ... </ol> for a numbered ordered list;
<ul> ... </ul> for a bulleted unordered list; or
<ul class="references"> ... </ul> for an unbulleted unordered list.
Within each reference, the only elements that need to be marked up specially are the title of a primary work and any entity that’s hyperlinked:
- J.I. Rodale: The Encyclopedia of Common Diseases, Rodale Books Inc., Emmaus Pennsylvania (1962)
- William Campbell Douglas, MD: “Chronic Fatigue Syndrome: The Hidden Polio Epidemic.” Second Opinion Newsletter
This list is marked up like so:
<ol>¶ <li>J.I. Rodale: <span class="title">The Encyclopedia of Common Diseases</span>, <a href="http://www.rodale.com/">Rodale Books Inc.</a>, Emmaus Pennsylvania (1962)</li>¶ ¶ <li>William Campbell Douglas, MD: "Chronic Fatigue Syndrome: The Hidden Polio Epidemic." <span class="title"><a href="http://www. secondopinionnewsletter.com/">Second Opinion Newsletter</a></span></li>¶ ¶ </ol>¶
